Let me show you how to make your YouTube video player embedded in Blogger blog responsive to all devices.
It works for both desktops and mobile phones.
You cannot just paste the provided code directly on your Blogger blog, or even temper with its dimension (height and width measurements).
It doesn't work.
There is a way to make YouTube video clip embedded on your Blogger blog responsive for both desktop and mobile device.
Make YouTube Video Player in Blogger responsive
Here is a simple tutorial showing you how to make YouTube responsive to any device.
There are two main steps.
Step One: Add CSS Responsive Code
1. Log-in to your Blogger dashboard.
2. Click on "Theme".
3. Then click on drop-down icon next to "CUSTOMIZE" button.
4. Now click on "Edit HTML".
5. Look for this code: ]]></b:skin>
6. Now paste this set of code just before ]]></b:skin>
.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
7. Click "Update" button.
Step Two: Embed YouTube Video In Blog Post
1. Paste this code where you want the video clip to be on your blog post.
2. You need to replace the VIDEO ID according to your YouTube video ID.
3. As for the video clip dimension XXX (width & height), you can change to your own preference.
4. Click the "Update" button.
5. That's all.
Now all the embedded YouTube videos should look like this responsive video below: