What is the best way to change the default iframe size when using oEmbed?

This topic has 3 replies, 2 voices, and was last updated 3 years, 7 months ago by lighterdayz.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
April 1, 2021 at 8:49 AM #26851

lighterdayz
Participant

I am using oEmbed field to show post videos in post grid with Beaver Themer field connection shortcode.

The default iframe size is creating a lot of space above and below the videos. (see below)
Space output: https://www.screencast.com/t/FWoTMLhf0

Here is the output from Dev tools:
<a href="https://player.vimeo.com/video/84739025?dnt=1&app_id=122963">https://player.vimeo.com/video/84739025?dnt=1&app_id=122963</a>

What(and where) is the best way to style the width and height of the iframe?

Thanks!

Add New Note to this Reply

April 1, 2021 at 12:25 PM #26858

Long Nguyen
Moderator

Hi,

If you embed a Vimeo video, I think you can use the field custom HTML then add all responsive code generated by Vimeo. Screenshot https://share.getcloudapp.com/yAuDo87K.

Add New Note to this Reply

April 1, 2021 at 7:57 PM #26870

lighterdayz
Participant

Sorry, i maybe wasn't clear.

I have an oEmbed metabox for the user to insert a featured video for each post. The user will upload both youtube and vimeo videos. I need the videos to populate on an archive type page, which they are now, but the sizing is wrong. Do I need to create a container that the video fits in?
I need all the videos to show in a uniform iframe size. I don't understand "you can use an html field" when I'm using an oEmbed with field connection in the beaver builder custom layout.

How can I make the output area uniform?

Thanks!

Add New Note to this Reply

April 1, 2021 at 8:16 PM #26872

lighterdayz
Participant

I found the answer with CSS. Make a relative position container and make the embedded iframe position absolute.

Add New Note to this Reply
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.