Posts
Follow these step to add YouTube videos to your blogger blog post with this embed code. Benefits of this method, responsive YouTube videos size in any device, show only your related videos when viewers pause the video, show only your videos at the end of the video.
First Step
1. Copy This css code and Paste it in Your Blogger Theme
/*--------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----*/
Second Step
2. Head Over to Blogger Dashboard
Click on the top left menu bar, click on layout
|
| Screenshot |
-Click on theme Designer
-Click on Advanced
- Next select Add CSS from the drop down menu
- Now paste the css code and save
Advertisement
3. Copy This Embed Code and Paste it in HTML of Your Blog Post
<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>
-Go back to Blogger Dashboard and open the post you want to add or emebed
YouTube videos. Click the HTML and past Emebed code.
|
| Screenshot |
- Once past embed code, now remove VID-ID from embed code and replace it with
your YouTube Videos-ID
- Save and Publish your post
Congratulation! Done, now you can see responsive YouTube videos on the post.
Leave a comment if you find this article helpful or feel free to ask any
question.
No comments:
Post a Comment