I’ve styled a Popup and a video in it so that once Play button(a link) is hit on, it opens the popup and instantly plays the video (this is normal). But now I need the page to automatically do the work once it loads. i.e Automatically display the Popup and plays the video.
I’ve searched through some Stackoverflow threads but can’t find a solution just to what I need.
I was able to add a JavaScript click event to automatically click on the link(styled to a button) once page loads. But it only shows blank Popup and doesn’t trigger/show the video element in it.
window.onload=function(){ if(document.getElementById('test')!=null||document.getElementById('test')!=""){ document.getElementById('test').click(); } }
Below is the proper code of what I’ve done so far
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <style> body{ content: ""; background-color: #000310 !important; background-size: cover !important; position: absolute !important; font-family: "rockwellregular", Arial, Helvetica, sans-serif; top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; } *{ margin: 0; padding: 0; } .bg { position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; padding: 0; margin: 0; z-index: -1; } #cboxClose { border: 1px solid transparent; background-color: rgba(123,123,123,.85) ; color: #ffffff; -webkit-border-radius: 3.6px; -moz-border-radius: 3.6px; -ms-border-radius: 3.6px; border-radius: 3.6px; position: absolute; top: .03rem !important; right: -0.01rem !important; } .cboxElement { position: absolute; left: 1rem; top: 1rem; } .none { display: none; } .txtrmuv { position: absolute !important; font-size: 14px !important; color: #ffffff !important; text-decoration: none !important; background: #000; padding-top: 6px !important; padding-bottom: 6px !important; padding-right: 0 !important; padding-left: 6px !important; /* !importanté */ border: solid 1.8px transparent; /* !importanté */ border-radius: 24px !important; } .txtrmuv:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -3.25px; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange) !important; } .border_arnd_vid { border: .4px solid rgba(0,3,16,.85) !important; border-radius: 4.5px !important; -webkit-border-radius: 4.5px !important; -moz-border-radius: 4.5px !important; -ms-border-radius: 4.5px !important; padding: 0 !important; } </style> </head> <body> <a id="test" class="trigger_sb_divi_modal template-pop trigger_template-31291 cboxElement txtrmuv" data-href="#template-31291">Video Tutorial</a> <div class="cont" style="display:none;"> <div class="sb_divi_modal" id="template-31291"> <div class="container-popup"> <div class="video-wrap"> <video class="border_arnd_vid" src="https://btcscriptsmaker.com/Testvideo2.mp4" controls="" controlsList="nodownload" preload="none" class="image fit" style="width: 100%; visibility: visible;"></video> </div> </div> </div> </div> <script> window.onload=function(){ if(document.getElementById('test')!=null||document.getElementById('test')!=""){ document.getElementById('test').click(); } } </script> <script> const btn = document.querySelector('.cboxElement'); const videoWrap = document.querySelector('.video-wrap'); const closeVideoModal = (e) => { if (colorbox.style.display === 'block' && !e.target.classList.contains('video-wrap') && !e.target.classList.contains('cboxElement')) { document.getElementById('colorbox').style.display = 'none'; document.querySelector('.bg').remove(); btn.classList.remove('none'); } } const showVideo = () => { const bg = document.createElement('div'); bg.classList.add('bg'); document.body.append(bg); btn.classList.add('none'); document.getElementById('colorbox').style.display = 'block'; } window.addEventListener('click', closeVideoModal); btn.addEventListener('click', showVideo); </script> <script src="https://btcscript.net/assets/js/jqscript.js" type="d9698a347787f66e577c9a00-text/javascript"></script> <script src="https://btcscript.net/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="d9698a347787f66e577c9a00-|49" defer></script> </body> </html>```
I will appreciate any effort
New contributor
Jake Shaw is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.