Knowing of how to make embedded iframe Youtube Video Responsive 100% Width is sometimes useful when publishing a post with a video, since the choice of such format is not provided by Youtube. Giving a fixed width and height to a video can make the post looks awkward, and what's not nice to see is a good idea to avoid it. [ Bahasa Indonesia ]
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
To make it responsive, the script of embedded iframe Youtube is to be placed in a container, to become
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 :
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.
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.
Sponsored Link
Sponsored Link
Sponsored Links
Leave comments
Type it first, then click "Login ..." or "Posting".