DiscussionsCategory: Divi Areas ProCodeExample for Popup Vimeo-Video with start autoply after click on linked button
AvatarMartin asked 4 months ago

Is there someone who has a solution to use a DiviAreaPro Module (#dp-introVideo) with VimeoVideo inside. (placed as an iframe code-module – or maybe with different approach?)

Used code:

<div style="padding:56.25% 0 0 0;position:relative;">
	allow="autoplay; fullscreen; picture-in-picture"
	style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Strategiegespäch">

<script src="https://player.vimeo.com/api/player.js">

does not work in frontend (white space) and get trouble in backend because the video is autoplaying int the divi-editor without click on the button. So it is annouying to hear alltime the same video-sound…

=> I would like to have the video autoplayed when the linked button (linked url #dp-introVideo) is clicked by visitor.

I can’t find any help in documentation or with google. Maybe I’m looking for the wrong term.

=> Would be great to get some exampleCode or a link to the documentation or a working solution.

Best regards Martin

1 Reply
AvatarPhilipp Staff answered 4 weeks ago

Hi Martin,

thanks for that suggestion. We’ll review some ways to better support Vimeo (and other) iframe content inside Popups.

For the moment, you can use the ”show_area” action of the Divi Areas JS API to run JS code once an Area is visible.

Here’s a quick sample page with JS code to run an Vimeo iframe once the Popup is opened (and not inside the Visual Builder): https://preview.divimode.com/blog/2022/04/19/auto-play-vimeo-inside-popup/

The code is not bullet proof, but it’s a quick showcase on how to approach the workflow.

Note: When a Popup is hidden, it’s removed from the browsers memory. This frees up resources, but it also means, that iframes are unloaded when you hide the Popup. The next time the Popup is opened, the iframe is re-loaded and any video progress is reset – the video will start playing from the beginning.

You can find more details and other JS actions here: <a href="https://help.divimode.com/article/405-action-and-filter-reference" rel="nofollow" data-wpel-link="internal">https://help.divimode.com/article/405-action-and-filter-reference