Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.

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.

Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

Have a code snippet to share? Format RAW codes here... expand_more

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Add responsive video embed at Blogger post editor easily using CSS responsive utility classes & works on all modern web browsers & any screen sizes for Youtube, Vimeo, iframe videos, object videos & availability to use amp-video tags whe AMP HTML is used with Blogger theme framework.
Blogr-AMP: Enable Responsive Videos Embed on Blogger Posts
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Enable Responsive Videos Embed on Blogger Posts.

MOBILE TEST by GOOGLE launch VALIDATE AMP launch
mail