Automatic re-sizing of embedded videos.

[cnordin]

Currently there is support for embedded images in the mnml theme, since they automatically re-size to fit the page and mobile device. However, embedded videos, for example from youtube, will quickly overrun the bounds of either the webpage or a mobile device, with no automatic re-sizing.

For example the embedded image below, despite size, will be limited by the boundaries of the page or device.

<a href="http://www.flickr.com/photos/99917217@N03/9455066604/" title="Minecraft World by cnordin, on Flickr"><img src="http://farm4.staticflickr.com/3817/9455066604_8b900e40a5_c.jpg" width="1600" height="1200" alt="Minecraft World"></a>

However, if I embedded a video from youtube, then it will not automatically re-size to fit on the screen on both the webpage and a mobile device.

<iframe width="1600" height="1200" src="//www.youtube.com/embed/_QP5X6fcukM" frameborder="0" allowfullscreen></iframe>

[ioveracker]

I just pushed changeset 0a78b2f which addresses this issue. You can take advantage of these changes in two ways:

1. Use the embed-video-container div
Simpily wrap your embed code in the embed-video-container div like this:

<div class="embed-video-container"><iframe width="1600" height="1200" src="//www.youtube.com/embed/_QP5X6fcukM" frameborder="0" allowfullscreen></iframe></div>

Or, if you'd like a markdown-friendly approach...
2. Install the octopress-responsive-video-embed plugin
Copy youtube.rb from the octopress-responsive-video-embed plugin to your /plugins directory. When you want to embed a youtube video, use the following markdown:

{% youtube _QP5X6fcukM %}

Replace the video id with the video id you'd like to post, of course. (Make sure not to confuse this with the video plugin included with Octopress, which is used to embed mp4 files.)

I have tested this by manipulating my user agent string and screen size, but haven't tested on a mobile device yet, so let me know if you see any issues.

[cnordin]

Thanks for this addition.