[Resolved] Resizing video embed

[Author]

Posts

[sergeP]

Hello,

I have been trying many different way to resize the videos displayed in Views and uploaded with a CRED form field embed media. I have checked many different support ticket and tried many different ways but It does not work.

Please see the bottom of this page for example on how the video are displayed :
hidden link

I tryed
With the toolset tool

[types field='video-youtube-facebook' width='100%' height='50%'][/types]

Even with Iframe code :

<iframe width="420" height="315"src=" field="[types video-youtube-facebook][/types]></iframe>

with custom css :

[types field="video-youtube-facebook" class="html5-video-player"][/types]

.html5-video-player {
  position: relative;
  padding-bottom: 56.25%; /*16:9*/
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
    width: 100%;
  height: 50%;}

I can't figure out how to do.
Thank you in advance for your much needed support.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

The issue seems to be that the Elementor builder's built-in styles are setting 100% width to the iframe tag, but they are not applying automatic height to it.

To fix this you can include the following custom CSS code in your website:

.elementor iframe, .elementor object, .elementor video {
    height: auto;
}

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

I hope this helps.

regards,
Waqar

[sergeP]

My issue is resolved now. Thank you!
Very easy indeed 🙂

Thanks for your valuable support !