small corrections for all templates

Post Reply
User avatar
Posts: 202
Joined: Fri Sep 19, 2014 1:53 pm

small corrections for all templates

Post by 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=”” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

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

Code: Select all

position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
.iframe-container iframe{
position: absolute;
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 Get ready to hamsterization! 8-) code takes less than a kilobyte! shock! new version for PHP 8 with new templates

Post Reply