New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatic re-sizing of embedded videos. #7

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

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

@ghost ghost assigned ioveracker Aug 17, 2013

@ioveracker

This comment has been minimized.

Owner

ioveracker commented Aug 19, 2013

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

This comment has been minimized.

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