How to Embed Responsive Videos Uploaded on Blogger

Blogger is a popular blogging platform that allows users to easily create and manage their blogs. One of the features that make Blogger an attractive option for content creators is its ability to host videos directly on the platform. However, embedding these videos in your posts to make them responsive can be a bit tricky. In this post, we'll walk you through the steps to embed responsive videos uploaded on Blogger.

Step 1: Uploading the Video to Blogger

To begin, first, you need to upload your video to Blogger. Here are the steps to do it:

1. Log in to your Blogger account and go to the post editor.
2. Click on the "Add or Edit Images" button located above the post composition area.
3. In the dialog box that appears, click on the "Upload" tab, and then select your video file. Once the file has been uploaded, save the post as a draft.

Step 2: Adding the Video to Your Post

Now that you have uploaded your video to Blogger, it's time to embed it in your post. Here are the steps:

1. Go back to your post editor and click on the "Compose" tab to switch from the visual editor to the HTML editor.
2. Locate the following code snippet in the HTML editor, which represents the video thumbnail image: <img height="320" src="[image URL]" width="425">
3. Replace the [image URL] with the URL of your uploaded video. The URL should look something like this: https://[yourblogname].blogspot.com/_/RSSFeedsDetailPage/Images/(video-filename)-h624-v357.jpg
4. After replacing the image URL with the video URL, remove the entire <img> tag as we no longer need it since we're embedding the video directly into the post instead of using a thumbnail image.
5. Add the following code snippet just below the video URL: <div style="position: relative; padding-bottom: 56.25%; height: 0;"> <iframe src="[video URL]" frameborder="0" allowfullscreen></iframe> </div>
6. Replace [video URL] with the URL of your uploaded video, which should be something like this: https://www.youtube.com/embed/[video-ID] (replace [video-ID] with your actual YouTube video ID).
7. Save your post as a draft or publish it if you're ready.

Step 3: Making the Video Responsive

To make the video responsive, we need to add some custom CSS to our Blogger template. Here are the steps:

1. Go to Blogger Dashboard > Template > Customize.
2. Click on the "Advanced" tab and paste the following code snippet at the bottom of the custom CSS editor:

#mw-video-player iframe, object, embed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. Save your template changes by clicking the "Apply to Blog" button at the top of the screen.

Now, whenever you embed a video using the steps above, it will be responsive and fill the entire width and height of its container.

That's it! With these simple steps, you can easily embed responsive videos uploaded on Blogger in your posts.

Published September, 2018