I´m using Elementor to embed the JS code for the Cloudflare stream player (using the Elementor HTML code widget). The player pops up and the video plays but the controls are only half visible, the buttons don´t really work, the mapping of the clickable area seems misaligned (for example, clicking on the settings wheel makes the video go full screen)
I´ve replicated this with 3 different videos, including Cloudflares own API manual example (see below)
Any ideas how to fix this?
There are 2 Widgets to embed code Elementors own HTML widget and the Wordpress Custom HTML widget - both show the misaligned controls
What if you set height less than 240px or not set at all?
Can you share a link to page (you can create a dummy one)? That way we can investigate more deep what is wrong.
I have tried several different videos, including Cloudflares own sample video. I have checked the code in view source on the served webpage is exactly the same as the embed code in the streaming page on Cloudflare.
Yet, the problem persists. I supected that this is an Elementor issue, so I created a regular Wordpress page and embedded the code. Still the same. So my best estimate right now is that it’s a Wordpress problem. This has nothing to do with formatinng. This happens even when I put it on an otherwise empty page with no formatting.
I haven’t been able to upload any dummy content but still hoping someone has any ideas. The code looks as it’s supposed to
With a URL a web developer can find the parent element of controls via browser Inspect Element dev tool and investigate from where it gets the attributes and find a fix. This is not a Cloudflare issue and you will find a solution faster by asking at http://stackoverflow.com.
Seems that we cannot embed a Cloud flare Stream video link like we can with YouTube using Elementor, is there a way?
