I released a small update to the mnml Octopress theme recently to resolve an issue experienced by one of the users of mnml. Cole Nordin opened an issue on GitHub which captures a common issue when embedding videos in posts wherein the video will not be resized with the window and therefore does not fit within the bounds of the screen on certain mobile devices.
To address this, I added CSS from the octopress-responsive-video-embed plugin to the theme. When you need to embed a video, you can do it one of two ways.
Use the embed-video-container div
You can take advantage of the CSS directly if you don't want to mess with plugins. Simply wrap your embed code in the
embed-video-container div like this:<iframe width="1600" height="1200" src="//www.youtube.com/embed/_QP5X6fcukM" frameborder="0" allowfullscreen></iframe>
Or, if you'd like a markdown-friendly approach...
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.)