Do you want to add a YouTube video to your Blogger blog post, but find that the typical embed code provided by YouTube isn’t responsive to your blog layout? Moreover, do you worry about losing traffic to your blog and channel when YouTube recommends other videos at the end of your video?
In this tutorial, we will show you the best way to add a responsive YouTube video to your Blogger blog post, with the added bonus of only showing your related videos when the video is paused or finished.
First, let’s look at the cons of adding YouTube videos to your blog in the typical way. The embed format provided by YouTube is not responsive, so when you make the screen size responsive, the video size gets cropped and doesn’t fit the blog layout. Moreover, YouTube shows recommended videos from other channels when your video is paused or finished, which can lead to a loss of traffic to your blog and channel.
To avoid these cons, we’ll show you how to embed a YouTube video in a responsive way that only shows your related videos.
1. Open this blog post (link provided in the video description) and copy the CSS code.
2. Head over to your Blogger dashboard, click on “Layout,” and then “Theme Designer.”
3. Click on “Advance” and select “Add CSS” from the drop-down menu.
4. Paste the CSS code and click on “Save.”
5. Go back to the post and copy the iframe embed code.
6. Open the post where you want to add the YouTube video and click on “HTML view.”
7. Paste the code, and replace “vid id” with your video ID. You can copy the video ID from the YouTube URL.
8. Update the video and reload the page.
Now you can see that the video fits the blog layout and is responsive to any device size. When the video is paused, it shows only your related videos, and when the video is finished, it again shows your related videos.
We hope this tutorial has been helpful in showing you how to embed a YouTube video in a responsive way that only shows your related videos. If you have any questions, please feel free to comment below.