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 this 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;
border: solid 1.8px transparent;
border-radius: 24px !important;
}
.txtrmuv:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -3.25px;
border-radius: inherit;
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>
A picture of the error I got on console
It says: Uncaught (in promise) DOMExeception: play() failed because the user didn’t interact with the document first.
Any effort will be appreciated