YouTube Video Popup will show now, and after 30 seconds, the Vimeo video will show automatically. Then, 30 seconds after the Vimeo popup appears, the MP4 video will show automatically… Please wait…
Shortcode and attributes used on this demo are:
// YouTube - Shows immediately without delay (dbs="0") - Minimized Design on the Right side (minimize="right") & Custom colors (co="#ffffff"): [video_popup_opl url="https://www.youtube.com/watch?v=EMmKs8vMKhU" mute="1" op="20" co="#ffffff" minimize="right" dbs="0"] // Vimeo - We used dbs="30" to delay the Vimeo popup by 30 seconds, while the YouTube popup has no delay - Minimized Design on the Left Side & Custom colors: [video_popup_opl url="https://vimeo.com/1117237151" mute="1" co="#D6763A" minimize="left" dbs="30"] // MP4 - We used dbs="60" to delay the MP4 popup by 60 seconds - Basic design & Custom colors: [video_popup_opl url="https://wp-time.com/wp-content/uploads/2018/06/divi.mp4" mute="1" co="#908A7E" dbs="60"]
The idea is simple: when using three [video_popup_opl] shortcodes on the same page, set a delay (dbs) for two of them, making each delay longer than the previous one. For the popup you want to appear first, set dbs=”0″. The popup with the shortest delay will show first, followed by the others in order of their delays. Even if the user closes a popup, the next one will still appear once its delay time has passed. For example, you can set dbs=”0″ for the first popup, dbs=”30″ for the second, and dbs=”60″ for the third to create a sequential display.
Order of Shortcodes in the page/editor does not matter; what determines which popup appears first is the value of the dbs attribute. The following example produces the same result as the live demo on this page:
[video_popup_opl url="https://wp-time.com/wp-content/uploads/2018/06/divi.mp4" mute="1" co="#908A7E" dbs="60"] [video_popup_opl url="https://www.youtube.com/watch?v=EMmKs8vMKhU" mute="1" op="20" co="#ffffff" minimize="right" dbs="0"] [video_popup_opl url="https://vimeo.com/1117237151" mute="1" co="#D6763A" minimize="left" dbs="30"]
Why did we set dbs=”60″ for the MP4 popup instead of 30?
To understand the idea:
We set dbs=”0″ for the YouTube popup so it shows immediately >>> Then after 30 seconds, the Vimeo popup appears >>> Then after another 30 seconds (30 + 30 = 60), the MP4 popup appears!
If we had set dbs=”30″ for the MP4 popup, the Vimeo popup would not appear. The delay for each popup should be longer than the one before it, which is why we set dbs=”60″ for the MP4 popup.
Note: The delay set with the dbs attribute is not an exact timer based on video playback. It starts counting from the moment the page has finished loading, not from when the first video begins or ends. For example, if you set a 30-second delay, the second popup might appear while you’re still watching the first video — say after 26 seconds — because the delay is based on page time, not video time.
Can I use more than three shortcodes on the same page? There is no limit, but using too many popups may affect the page performance.
Can I use the Public On-Page Load feature and [video_popup_opl] shortcode on the same page? Yes, there is no conflict. However, as mentioned before, what determines which popup appears first is the delay value: dbs attribute for [video_popup_opl] shortcode, and the “Delay Before Show” option for the Public On-Page Load.
The [video_popup_opl] shortcode is available only in the Premium version, while the Public On-Page Load feature is available in both Free and Premium versions, with more advanced options in the Premium version.
Customizing & Show Once
With many attributes, you can customize the colors and other options as you like. Also, the once=”” attribute lets you set how many days to wait before showing the popup again to the same visitor or user. For example, once=”2″ will show it again after two days. Here’s an example:
[video_popup_opl url="https://wp-time.com/wp-content/uploads/2018/06/divi.mp4" mute="1" co="#908A7E" dbs="60"]
[video_popup_opl url="https://vimeo.com/1117237151" mute="1" co="#D6763A" minimize="left" dbs="30" once="2"] // 2 days
[video_popup_opl url="https://www.youtube.com/watch?v=EMmKs8vMKhU" mute="1" op="20" co="#ffffff" minimize="right" dbs="0"]
// Result:
YouTube Video Popup will show immediately, and after 30 seconds, the Vimeo video will show automatically.
Then, 30 seconds after the Vimeo popup appears, the MP4 video will show automatically.
However, if the same visitor returns to the page, YouTube and MP4 popups will appear again, but the Vimeo popup will not show because we used once="2", meaning it will only appear again for that visitor after two days.
Double On-Page Load – Live Demo
Public On-Page Load – Live Demo
Promotion: Build Any Website Like A Pro With Divi’s Visual Design Interface!
You May Like It
From Our Products: The ultimate Preloader plugin for WordPress. Smart, flexible, and made for easy control. Available in both Free and Premium versions. Trusted by over 10,000 websites.
