small corrections for all templates

[turboblack]

Responsive YouTube embed

Responsive web design just means that the video will adapt to any screen size. This is what we want our video to do too.

So no matter the device, it always looks good and in the right proportion.

To make it easier for you, just add a div around the iframe and give it a class name “iframe-container”.

For example:

Code: Select all

<div class=”iframe-container”>

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/.......” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

</div>

And here is the CSS you will need for responsive YouTube video:

Code: Select all

.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

I noticed an interesting bug. if you use the built-in editor, then you need to correct the images and the video on different screens and different devices, so that they display correctly, so I suggest that you simply paste this code directly into the template to avoid the routine with editing