How do I make a YouTube video responsive?



For instructions on adding a YouTube video to a product or content page, check our the article How do I add a YouTube video to my site?

Embedded YouTube videos are displayed at a width you chose when generating the embed code. The problem is that the video can be too wide for small screens like on mobile phones. This article covers how to change the embed code so that the video will change size depending on the screen size.

The video will take up the full width of the column but will resize for smaller screens.

This is an example of the embed code you get from YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gocnu5_xw_k" frameborder="0" allowfullscreen></iframe>

 

Make the following changes:

  1. Wrap the embed code in a DIV with the classes embed-responsive and embed-responsive-16by9. If you video is a 4:3 aspect ratio, use the class embed-responsive-4by3.
  2. Remove the height, width and frameborder.
  3. Add the class embed-responsive-item to the iframe.

The embed code will look like:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gocnu5_xw_k" allowfullscreen></iframe>
</div>

 

Unless you are using one of the latest themes, you will also need to add the following to the end of the style.css stylesheet in your theme. You will find it by going to  > Website Templates and selecting your theme and Assets/css/style.css. Using SFTP, select /httpdocs/assets/themes/themename/css/style.css where themename is the theme name.

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

 

Here is what the responsive video will look like:


  • Last Modified: 01/02/2016 Neto Version: 5.96

     

    Related Articles & Videos