Embeding a video

                 

1. Directly From the blog   

                                                               By clicking the YouTube, you can easily embed any videos by searching the title of that video or with its url. 

  Disadvantage

                            - YouTube Videos Size may vary depending on the Device.
                           - Shows Related Videos rather than your uploaded videos when User Pause the video or at the End of the video.
                          

2. By adding html to your post

✅ 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

/*--------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

<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>





Replace "VID-ID" to the last part of url (xLXEhCXDfFk) of the YouTube video.

For Example:


# Copy This Embed Code and add in blog post for Autoplay Video

<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>





As per above, replace the "VID-ID" from the code.

Tags
To Top