Optimising your website for mobile devices: YouTube Videos

Posted by jw285 at Feb 21, 2014 12:35 PM |
Making embedded YouTube videos change size depending on the users' screen size.

A while ago I wrote a blog post called Optimising your website for mobile devices: An Introduction which explained that the University website is now responsive (i.e. it changes layout depending on the visitors' screen size). However not all of a website's content, such as YouTube videos, will automatically resize accordingly. This can cause page layouts to 'break' on some devices. In this post I'll explain how to make YouTube videos resize according to the users' screen size. For this you'll need to edit a Plone page in HTML view. If you're not comfortable doing this then contact the Web Team and we'll do it for you.

Get the video embed code

Go you YouTube and get the embed code for the video that you'd like to embed. It will look something like this:

<iframe width="560" height="315" src="//www.youtube.com/embed/kcMn_hPWEIg?rel=0" 
frameborder="0" allowfullscreen></iframe>

See Embedding a YouTube video into a webpage for instructions.

When you have the embed code you need to go to your Plone page, click Edit, click the HTML button to switch to code view and then paste the embed code into your page at the appropriate place. You now have a video but it's not responsive.

Making the video responsive

Now you have to wrap the YouTube embed code within an opening and closing <div> tag that contains a class called videoWrapper. Your code should look something like this:

<div class="videoWrapper">

<iframe width="560" height="315" src="//www.youtube.com/embed/kcMn_hPWEIg?rel=0"
frameborder="0" allowfullscreen></iframe>

</div>

When you save the page the result will be a YouTube video that occupies the full width of the page and will resize accordingly when the width of the page changes.

Restricting the width of the video

If you'd like to restrict the width of the video so that it doesn't occupy the entire width of your Plone page then you can add another <div> tag that contains another class. There are three classes to choose from:

  • class="embed-video-small" will restrict the video with to a maximum width of 332 pixels
  • class="embed-video" will restrict the video with to a maximum width of 420 pixels
  • class="embed-video-big" will restrict the video with to a maximum width of 520 pixels

So now your embed code should look something like this:

<div class="embed-video">

<div class="videoWrapper">

<iframe width="560" height="315" src="//www.youtube.com/embed/kcMn_hPWEIg?rel=0"
frameborder="0" allowfullscreen></iframe>

</div>

</div>

The result of this will be a video that has a maximum width of 420 pixels. It won't get any bigger on larger monitors but it will shrink down on smaller screens.

Adding a video caption/description

Sometimes it's useful to add a caption or description below the video to give your website visitors an indication of what they're about to watch. You can do this by adding an HTML paragraph in the appropriate place and your code should now look something like this:

<div class="embed-video">

<div class="videoWrapper">

<iframe width="560" height="315" src="//www.youtube.com/embed/kcMn_hPWEIg?rel=0"
frameborder="0" allowfullscreen></iframe>

</div>

<p>Students at the University of Leicester say how they feel about studying here. One of the most common quotes is that the University is warm, friendly and welcoming, this short clip shows why students feel at home so quickly.</p>

</div>

Aligning the video

If you'd like to align the video to either the left or the right hand side of the page so that the text content wraps around it you can do this by adding another class. Either image-left or image-right. Your code should now look something like this:

<div class="image-left embed-video">

<div class="videoWrapper">

<iframe width="560" height="315" src="//www.youtube.com/embed/kcMn_hPWEIg?rel=0"
frameborder="0" allowfullscreen></iframe>

</div>

<p>Students at the University of Leicester say how they feel about studying here. One of the most common quotes is that the University is warm, friendly and welcoming, this short clip shows why students feel at home so quickly.</p>

</div>

The final result

When you've saved the page the result should look something like the example below which will resize accordingly on mobile phones and therefore prevent breaking the layout of the page.

Students at the University of Leicester say how they feel about studying here. One of the most common quotes is that the University is warm, friendly and welcoming, this short clip shows why students feel at home so quickly.

About Me - Jeff Wilkinson

Share this page: