Video hosting embed looks strange on a website

I am using the embed code provided by the video upload platform on Cloudflare:

<div style="position: relative; padding-top: 56.25%;"><iframe src="" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

However, on my website, - the video slides to the right way too much and does not auto-scale.

Any ideas how to fix that? Do you know of any players that are compatible?

I tried the official CF Wordpress plugin, but that one does not support Elementor, only the default Wordpress editor, which I am not using and cannot use.

@alexander10 It looks like the text-align: center rule applying to the embed snippet’s outer container is causing the iframe to be positioned incorrectly. If you set that to text-align: initial the iframe is positioned correctly. Alternatively, you can also set left: 0 on the iframe itself to explicitly position it along the left edge of the position: relative parent container.

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.