Giving just 100% width does not solve the problem, as the height does not follow proportionally with the width which makes the appearance of the embedded Youtube videos become even more unpleasant. Therefore there must be another way to create an embedded Iframe Video Youtube Responsive 100% Width which come with a proportional height as well.
The tips on how to make Youtube video to be responsive 100% width originally came from this post, and I feel the need to write it as a personal reference when someday it's needed, as memory is short, in addition it may be useful for others.
The embedded iframe code of a Youtube video to be placed in a post is usually
<iframe width="560" height="315" src="https://www.youtube.com/embed/f6Bo07pdBs0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>, where one can choose a fixed width and height.To make it responsive, the script of embedded iframe Youtube is to be placed in a container, to become
<div class="container"><iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe></div>. Next is to create css to set the width and height of the embed iframe Youtube video to be responsive 100% width.The height element of the container is set zero, with a certain percentage for the bottom padding which is the percentage of the container width to provide a fixed width and height ratio aspect of the video. For that we need to make the container relative and the iframe absolute, which is placed inside a div.
The css code is as follows :
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}This method not only gives the effect of video appearance with responsive width and height on desktops, but also gives the same result when it's opened on mobile phones. Although the question of how to create an embedded iframe Youtube Responsive 100% Width is answered, but there is one more problem that still needs to be solved, that is how the embedded iframe Youtube video does not slow down page loading.
The solution for the problem can be found in Defer Parsing Youtube Video for Fast Loading in Blogger.
Label: Blog, responsive, Youtube
Bagikan ke: WhatsApp, Email. Print!.
