Topics

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


Enable Responsive Videos Embed on Blogger Posts

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.

Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsAdd 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 Blogger blogs makes it easy to insert or embed videos using the Insert a Video icon available at post editor toolbar. However the videos ins....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

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

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


Working...

Ooops! We're having trouble connecting...