Video Wrap – Simple YouTube iFrame Hack For Better Mobile View

In this short post, I’ll go over the simple two-step process to correct the video sizing problem that many blogs face for iFrame embedded content such as YouTube videos when being viewed on mobile devices. This is a little technical and geeky but we’ll get your YouTube embedded videos working perfectly with just a few minute of effort..

Mobile is a lot closer to TV than it is to desktop.
~ Mark Zuckerberg

Why we need a mobile video sizing fix

During my latest theme update and site redesign I was focused heavily on mobile viewing of the blog. I’m using the Genesis framework^$ with the Eleven40 Child Theme^$. Even though the theme is responsive (viewable on any device, including mobile), it did require a little tweak to get embedded iFrames to size correctly on smaller screens like smartphones. I found this exact same issue on our two previous themes as well so it seems to be a common issue.

It’s a serious issue

The big problem when our videos don’t size correctly on mobile devices is they actually become unviewable. You can’t “pinch” the screen smaller to see it and you can’t even see the YouTube logo to click so it can be viewed directly on YouTube’s website; where it is mobile friendly.

With more and more people visiting our blogs on their smartphones, we need to be sure they can consume the content we worked so hard to create. Here’s another example I found on Fuzzy Wuzzy Anipals without the styles fix:

As you can see, the video only shows about half of the display and it plays the same way.

Back it up: First, before you start ANY type of custom update, even a simple stylesheet update, I recommend you back your blog and database up.

It used to be that we imagined that our mobile phones would be for us to talk to each other. Now, our mobile phones are there to talk to us.
~ Sherry Turkle

The embedded iframe video-wrap styles for CSS

This is a simple two step process to get your CSS (Cascading Style Sheets) to work their magic for your iFrame embedded content like YouTube videos.

Where to place the styles and how to find your stylesheet:

First, we need to add a little CSS code to your stylesheet. This, depending on your theme and/or framework can be located in one of several locations:

1. For Geneses Users: If you’re using my preferred framework, Genesis^$, you should have the free WordPress Plugin “Simple Hooks” installed. I inserted the CSS code (shown below) in the Genesis – Simple Hooks section labeled “genesis_meta Hook“.
   
2. For Thesis Users: Another popular option for bloggers is Thesis. It’s been a long time since I’ve used Thesis but, unless it has drastically changed, you’d add the first CSS code below by navigating to “Thesis Design Options“, then add a “Custom Stylesheet” under the “More Design Customizations” section.
3. For Custom Theme Options: The third possible location would be within your theme’s custom settings, if your theme provides a place for custom CSS. If so, and you’re not using Geneses or Thesis, add the code there. 
4. For Basic Stylesheet Access: Finally, the least appealing option, is to add the code to the appropriate CSS sheet found in your WordPress dashboard under “Appearance“, then “Editor“. By default, your Stylesheet (style.css) should be the first file to display but, if not, you can find it in the right column. NOTE: If your theme has a separate CSS file for your added custom CSS coding, use that file rather than your main style.css file. 

The custom code (styles) for your stylesheet:

[css title=”Add this code to your CSS”]
<style media="screen" type="text/css"></pre>
<pre>video {</pre>
<pre> width: 100% !important;
height: auto !important;
}
.videoWrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>[/css]

YouTube iframe video wrap

The next part of the code is used for each instant of video or other iFrame embed. You’re simply calling on the styles you added in the stylesheet above. I wish I could remember the coder that helped me with this a few months ago but it works like a charm. Use the code below, replacing “<!-- Paste YouTube iframe here -->” with the iFrame embedding code YouTube gives you.

The code (style wrap) for embedding your videos:

[css title=”Wrap this code around your YouTube video iframe”]<div class="videoWrap"> <!– Paste YouTube iframe here –> </div>[/css]

Example Videos

NOTE: You will see no difference in the following videos when being viewed on a desktop or laptop. To see the change, you’ll need to open this post on a mobile device such as your smartphone. (I haven’t checked on my tablet).

For the example videos, this is just a short 11 second intro we use. The first video is using the raw embed code we get from YouTube and the second video is using that same embed code but with the above hack (fix). Both videos are set for 800px wide X 450px tall.

Video without the custom styles:

Video with the custom styles:

Thank you

I hope this helped. Are your videos sizing for you properly on mobile? Perhaps you’re like me and didn’t realize the issue even existed. Feel free to leave a comment below if you have any further tips, experiences, comments or questions.