Making your Videos Responsive on Blogger Blog Posts

By default, when inserting videos inside your Blogger blog posts, either from youtube or other sources, Blogger editor will assign a specific width & height for the video.

If you select Choose from my Youtube channel, you are able to retrieve your uploaded videos at Youtube without even adding the Youtube embed codes.

In this post we will show you how to make these videos responsive on your Blogger posts & looks proportion according to your uploaded video size/ratio.

On AMPaction Blogger theme, you have an option to use amp-video tags to display your videos in blog posts. You can choose to use amp tags or just display your videos like you normally would.

For AMPaction theme, responsive video utilities have been installed. 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/PVUY74yxGG8/0.jpg" src="https://www.youtube.com/embed/PVUY74yxGG8?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/PVUY74yxGG8/0.jpg" src="https://www.youtube.com/embed/PVUY74yxGG8?feature=player_embedded" frameborder="0" allowfullscreen>
  </iframe>
</div>

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

Highlighted yellow attributes removed while highlighted orange is replaced. The end results will look like below:-

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

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

The end results will look like below:-