Trongate Docs
switch to dark modeswitch to dark mode
»
»
Working With YouTube Videos

Working With YouTube Videos

YouTube videos are an integral part of many modern day websites.  So, we have recently added a couple of new classes to assist in making YouTube videos responsive.

What YouTube Normally Gives You

When you fetch video embed code from YouTube, you usually end up with code that looks like so:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Sq9ZZ8zilDw" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The problem with this kind of code is that it doesn't display nicely on devices with small screens such as mobile phones.

To make YouTube videos responsive, do the following two steps:

STEP 1: Add a class called 'video' onto the iframe code that has been obtained from YouTube.

STEP 2: Create a div around your YouTube iframe code.  The div should have a class of 'video-container'.

That's it!


EXAMPLE

<div class="video-container">
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Sq9ZZ8zilDw"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>




HELP & SUPPORT

If you have a question or a comment relating to anything you've see here, please goto the Help Bar.

 
×