Enable Responsive Videos Embed on Blogger Posts

Blogger blogs makes it easy to insert or embed videos using the Insert a Video icon available at post editor toolbar. However the videos inserted has a predefined width & size which is quite small but view able on any devices.

Blogger Theme with AMP integrations like this blog on Blogger, can use the amp-video tag, as applying amp tags in Blogger post editor is optional but preferred. To speed up your post publishing, Blogr-AMP theme framework provides some useful & re-usable CSS styles for users to use. You can view theme typography & helpers here at this detail page.

In this tutorial we will show you how it is done by using CSS & edit existing video iframe markup when Add a Video toolbar is used. We will show you how to make these videos responsive on your Blogger posts, displays proportionately according to your uploaded video size/ratio.

Adding Responsive Video CSS

Copy CSS codes below at your Theme > Edit HTML > preferably before ]]></b:skin> tag.

.flex-vids {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.flex-vids.wide {
  padding-bottom: 57.25%;
}

.flex-vids.vimeo {
  padding-top: 0;
}

.flex-vids iframe,
.flex-vids object,
.flex-vids embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px)
{
  .flex-vids {
    padding-top: 0;
  }
}

Save your Theme

Here we have added a classname .flex-vids reference to style video object/elements when inserted into your blog pages.

Applying Responsive Video Embeds

To use at your blog posts, here's how, example using Youtube videos:-

• Click Insert Video icon
• Select From My Youtube Channel
• Select the videos to display
• Click Save to apply video in post editor

Once you have selected the video, here's how to add the responsive utilities:-

• At post editor click HTML mode
• Now edit the Youtube video <iframe/> code like so:-

FROM

<div class="separator" style="clear: both; text-align: center;">
  <iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/{{UNIQUE-VIDEO-ID}}/0.jpg" src="https://www.youtube.com/embed/{{UNIQUE-VIDEO-ID?feature=player_embedded" frameborder="0" allowfullscreen>
</iframe>
</div>

TO

<div class="flex-vids">
  <iframe class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/{{UNIQUE-VIDEO-ID}}/0.jpg" src="https://www.youtube.com/embed/{{UNIQUE-VIDEO-ID}}?feature=player_embedded" frameborder="0" allowfullscreen>
  </iframe>
</div>

• Then Save your work.
• Preview your changes.
• Publish when done.

Highlighted yellow attributes to be removed while highlighted orange is replaced with the new responsive video class.

The end results will look like below:-

Responsive Wide Screen Videos Embed (16 by 9 Ratio)

If you have a 16 by 9 resolution uploaded videos, then add the wide classname to flex-vids like so:-

<div class="flex-vids wide">
  <iframe class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/{{UNIQUE-VIDEO-ID}}/0.jpg" src="https://www.youtube.com/embed/{{UNIQUE-VIDEO-ID}}?feature=player_embedded" frameborder="0" allowfullscreen>
  </iframe>
</div>

The end results will look like below:-

You can resize your web browser to view how these videos resizes itself proportianately according to the container it is assigned to.