Header

How to Insert Custom Aspect Ratio Videos with Elementor Video Widget

At this time Elementor page builder for WordPress doesn't support custom aspect ratios for its video widget. Here's how to change that and insert videos of any aspect ratio

- use the built-in Elementor Video widget and select your video


elementor video widget

 

- choose the 1:1 aspect ratio under the style setting

elementor video aspect ratio

- publish the page, then use web inspector to locate the markup for the video in the HTML. You'll recognise it because of the class 'elementor-aspect-ratio-11'

elementor video aspect ratio

 

- select its child with the class 'elementor-fit-aspect-ratio'

elementor video aspect ratio

 

and experiment with different % values for 'padding-bottom' until you find the value which fits your custom aspect ratio. You'll need to increase the bottom padding if your video is portrait format and decrease it if it's landscape. In my case it was 125%. Copy the selector and this padding value from web inspector and return to Elementor

- go the video widget settings > advanced and paste into the custom CSS field, save and check.

Good luck!

elementor video aspect ratio 5

 

 

 

How to make hyperlinks work…

How to make hyperlinks work when exporting InDesign to a PDF If you've added hyperlinks…

How to Merge Multiple CSVs…

How to Merge Multiple CSVs into a Single File Here's an ultra-easy solution to the…

Test Internet Explorer and…

Cross-browser testing on Mac OSX: Emulate Internet Explorer, Android and Window phones…

Track WordPress Contact Form…

How to Track WordPress Contact Form 7 (CF7) form submission with Google Tag Manager (GTM)…

Configure MX for a subdomain…

How to Configure MX records for a subdomain on ProtonMail If you are configuring a…

Joomla error "1030 - Got…

Joomla error "1030 - Got error 28 from storage engine" If you get this Joomla 1030 error…

Sublime shortcut to wrap…

Sublime shortcut to wrap selected text in a tag This is a super-useful Sublime shortcut…

How to enable GA enhanced…

How to enable GA enhanced link attribution in GTM Enabling enhanced link attribution in…

Optimising images and…

Optimising images and reducing file sizes It's sometimes difficult to create fast loading…

How to fix microdata or…

How to fix microdata or structured data errors in Joomla Microdata or Structured Data was…

Joomla error 500 - Unable to…

Joomla error 500 - Unable to load renderer class If you get a Joomla error 500 - Unable…

Using system font stack for a…

Using system font stack for a website This is an interesting idea that I'm seeing more…

How to open winmail.dat files…

How to open winmail.dat files on Mac OSX If you are on Mac OSX, you may occasionally…

CSS wildcard selectors with…

How to use wildcard CSS selectors with LESS If you are using LESS and need to use a…

How to fix a missing Admin…

How to fix a missing Admin Toolbar at the top of a WordPress page Working on an a…

How to add a CiviCRM…

How to add a CiviCRM extension to Joomla As you probably know, CiviCRM comes bundled with…

How to configure MailGun and…

How to configure MailGun and Google Business Apps in CiviCRM When configuring SMTP mail…

Warning JUser: :_load:…

Joomla Warning JUser: :_load: Unable to load user with ID: 62 If you see a Joomla warning…

How to prevent duplicate URLs…

How to prevent duplicate URLs with sh404SEF If you use sh404SEF and can't solve problems…

What is the 'Itemid' in a…

What is the 'Itemid' in a Joomla URL? If you examine the non-SEF url of a typical page on…

JLIB_APPLICATION_ERROR_COMPONE…

After upgrading from Joomla 3.5 to Joomla 3.6.0 I suddenly got a…

How to Launch Sublime Text…

How to Launch Sublime Text from Terminal or iTerm in OSX I've been working a lot with…

Customise a Joomla template…

How to customise a Joomla template based on article ID Working on a custom Joomla…

2013 - The Year of Responsive…

2013 -The Year of Responsive Web Design Some trends come and go. Others gather momentum…
No Internet Connection