Automatic re-sizing of embedded videos. #7

Closed
cnordin opened this Issue Aug 15, 2013 · 2 comments

Projects

None yet

2 participants

@cnordin
cnordin commented Aug 15, 2013

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>

mnml1

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>

mnml2

selection_066

@ioveracker ioveracker was assigned Aug 17, 2013
@ioveracker
Owner

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
cnordin commented Aug 21, 2013

Thanks for this addition.

@cnordin cnordin closed this Aug 21, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment