small corrections for all templates

Post Reply
User avatar
turboblack
Posts: 205
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=”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://old.net.eu.org/ Get ready to hamsterization! 8-)
https://github.com/turboblack/HamsterCMS new version with new templates :!:
http://elpis.ws new zine about small web :arrow:
Post Reply