How To Optimize YouTube Videos For Mobile Viewing On WordPress

If you’re not optimizing your YouTube video for mobile users you’re missing out on a large portion of your audience. This could result in lost sales or subscribers.

Here are some facts that may surprise you…

• 40% of YouTube’s traffic now comes from mobile users.
• About 50 million people in the U.S. now
  watch video on their mobile phones.
• Fifteen percent of online video hours globally are
  watched on smartphones and tablets. 

Did you know that when you grab the YouTube embed code or the YouTube URL and place it in your WordPress web page it doesn’t display correctly for mobile users. The dimensions of the video go off the screen when I view it on my iPhone.

Here are the steps to optimize YouTube
videos for Mobile Viewing On WordPress:

Watch this video…

1. Add this CSS code to your style sheet and save it.
   
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

2. Upload your CSS file to the server using Filezilla or your main FTP software
3. Grab the embed code from YouTube and insert it into your WordPress web page. Add the html code below to the YouTube embed code. Make sure you’re in text mode instead of the visual editor.

   
<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>


4. Save and publish the post.
5. View the post on your smart phone to see if it’s mobile responsive. Mobile responsive means that it will display correctly across all mobile devices.
6. Repeat this process for every YouTube video you add to WordPress

Here’s an important tip for you..

Make sure you use a responsive theme for your WordPress website. This will allow all your web pages and posts to display correctly across all mobile devices.

That’s it!

Resources

Fluid Width Video
Making Embedded Content Work In Responsive Design
embedresponsively.com helps build responsive embed codes for embedding rich third-party media into responsive web pages.

And now I’d like to invite you to subscribe to my Free e-course
“21 Ways To Get YouTube Traffic“