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.
.f…
Enable Responsive Videos Embed on Blogger Posts
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 Postsirsah
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....
Disqus Comments
Facebook Comments
Most Popular This Week
Blogr-AMP (V2) Blogger Theme Supports RTL Language Direction
Due to the many requests by users using Right to Left (RTL) language direction, for example Arabic, Tamil languages, now BlogrAMP version 2 ...
BlogrAMP Now in Version 2 Better Blog-ing Experience for 2018
Since early March 2017, we have started our next phase for Blogr-AMP Blogger theme with AMP HTML integrations. We wanted to fully utilize ...
How to Check Valid AMP HTML on Blogger Pages (Without #development=1)
When converting your Blogger blog templates & use Accelerated Mobile Pages HTML, constant blog page checking is needed, making sure your...
Fix Pinterest AMP-Social share image_url Issues Blogger AMP HTML Theme
Since July 2017, Pinterest amp-social-share button/plugin displays image_src errors when sharing directly from your blog posts or pages -- ...
Style & Presentation — Mobile 1st Blogger Template Approach
This post we will guide you on the basic to advance fundamentals of mobile first designs for a web/blog page, then apply it to your Blogger ...
Working to get connected...
Ooops! We're having trouble connecting. Please refresh your page or contact us...