small corrections for all templates

Post Reply
User avatar
turboblack
Support/Developer
Posts: 172
Joined: Fri Sep 19, 2014 1:53 pm

small corrections for all templates

Post by turboblack » Thu Nov 21, 2019 11:06 am

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
http://t0rba.tk/ my Russian-language research WonderCMS engine 8-) & also http://woua.pp.ua/ in Ukrainian

Post Reply