How to create responsive YouTube Embed in blogger.

Responsive YouTube embed. if you want to make a responsive youtube Embed code then, you can use this technique with most other iframe based code. which need you to give it a certain aspect ratio.

when you copy embed code of any YouTube videos then, you get the YouTube embed code with fixed width and height. It looks like below given code.

<iframe width="853" height="480" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

When we give it 100% width and height, then it will give you by default result. which is small and it is not responsive. Now we need to fix to properly. which give auto Width and height according to your screen size.

You can solve this problem by using this tips. copy this below given HTML And CSS Code. How to make a floating video like YouTube

if you are using blogger then you need to login in blogger go to “Theme”, select “Customize”, select “Edit HTML”, paste CSS code there. What is CSS Cascading Style Sheet

YouTube Embed CSS code

.ytresponsive {Status: Relative; Width: 100%; Height: 0; Padding-bottom: 56.25%; } .Video {Status: Absolute; Top: 0; Left: 0; Width: 100%; Height: 100%; } 
How to change video Embed size in blogger.
CSS Code Image Example

Youtube Embed HTML Code Container will be in your post, where you want show this YouTube Video in your Post.

Remember you will need to replace video “ID” which highlighted in red color.

Youtube Embed HTML Code

<div class = "ytresponsive">
<iframe src = "" frameborder = "0" allowable screen class = "video"> </ iframe> 
</ div>

if first method is not working then do it. it’s work with Blogger blog. Copy Below given CSS and HTML code paste where you want to add responsive Video. Remember you need replace Video URl “ID” (dhzUupuKhMI).

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

<div class='embed-container'>
<iframe src='' frameborder='0' allowfullscreen></iframe>

Here is Result.

Leave a Reply