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, 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:-
<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.