How To Make YouTube Videos Responsive In Your Blog Posts?
Embed YouTube Video: Did you know? YouTube was founded in February, 2005 and now there are billions of peoples upload, watch and share originally-created videos worldwide. Recently, there is a craze of creating a Responsive Blog or Website so that visitors may enjoy the respective site and blog from their all devices ranging from small size mobiles to large size computers and TVs. However, YouTube only provides fixed size codes to embed YouTube videos. The default size is 560px width and 315px height and you may change the size of YouTube videos with the help of custom size option under video size drop down option.
- YouTube is the most popular video sharing site today, where we can upload videos, watch videos, or you can also generate income from a YouTube Adsense account by registering via YouTube.
This YouTube site offers many advantages, one of which is the video embed feature which can be added and viewed directly on the blog.
In this article I will provide a way to make a responsive YouTube video on a blog and the method is not difficult.
If you are interested in these tips, you can immediately practice their application on your blog.
✅ Benefits To use This Method
- Responsive YouTube Videos Size in Any Device.
- Show Only Your Related Videos when User Pause the video.
- Show Only Your Videos at the End of the video.
✅ Steps to Add / Embed YouTube Videos in Your Blogger Blog Post
- First Copy the CSS Code Which We Provide in this post.
- Head Over to Blogger Dashboard.
- Select your blog.
- click on Layout
- click on Theme Designer
- Click on Advanced
- Now select "ADD CSS" from the drop down menu
- Now Paste the CSS Code
- Copy the Embed code which we provide in this post.
- Go Back to Blogger Dashboard.
- Open the post where you want to ADD or EMBED YouTube Video.
- Now Simply Remove VID-ID (from Embed code) and add Your Video ID.
- Publish or Update Your Post
- Done, Now You can see Responsive YouTube Video on the Post.
✅ Please Note
- You Need to Add CSS Code only one time in Your Blogger Theme
- You Need Use iframe Embed code whenever you want to add YouTube Video on the post.
1. Copy This CSS code and Paste it in Your Blogger Theme File
or else
/*--------YT-Responsive--css------*/
.ytiframe{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.ytiframe iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/*---xxx-----YT--Responsive-css---xxxx----*/
2. Copy This Embed Code and Paste it in HTML of Your Blog Post
or else
<div class="ytiframe"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="auto" src="https://www.youtube-nocookie.com/embed/VID-ID?rel=0" title="YouTube video player" width="100%"></iframe></div>
# Copy This Embed Code and add in blog post for Autoplay Video
or else
<div class="ytiframe"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="auto" src="https://www.youtube-nocookie.com/embed/VID-ID?&autoplay=1&rel=0" title="YouTube video player" width="100%"></iframe></div>
Let us know if this tutorial helped in the comment section below.
Post a Comment