Responsive YouTube embeds - Factor 3

Responsive YouTube embeds

Annoyingly, YouTube videos, when embedded in your responsive website, aren’t responsive!

The difference between responsive YouTube embeds and un-responsive YouTube embeds is demonstrated below.

Responsive YouTube Embeds

With mobile traffic set to overtake desktop traffic in 2013, the need for a responsive website that optimises the site for every device has never been so important.

Once you have invested in a responsive website, you can simply rectify this problem with YouTube embeds by following the instructions below to provide a consistent experience for website visitors that are using either a mobile or tablet device.

First, add the following code to your website’s CSS style sheet:

.video-container {
position: relative;
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px; height: 0; overflow: hidden;
 }
.video-container iframe,
 .video-container object,
 .video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }

N.B. ‘padding-bottom: 56.25%’ assumes an aspect ratio of 16-9.

Then whenever you add an embed code to your website’s HTML, additional <DIV> tags need to be added around the embed code, as shown below.

<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

It goes without saying that this should be added to every CSS style sheet as standard in the development of any responsive website.

This is one of many ways to integrate social media into your website and also optimise your content for social media engagement.

You might also be interested in

Yes is the answer. Even if not directly, we can always point you in the right direction. But chances are that with our broad experience across the branding, digital and marketing spectrums, we can help you to win and make it fun along the way.

  • Gemma
  • Liz
  • Ali
  • Donna

© Copyright Factor 3 Communications Ltd. 2018 | Privacy policy | Cookie policy