Messiahs
New Member
Hi all
I uploaded a video with my problem to my webspace: I make a video overly with start,stop funktion.
I know, elemtor have his own embed video overlay, but it does not have the required function.
I want the overlay to be always visible.
The video should run under the frame.
Therefore i have my own solution with the html block and java code
In the elementor editor work my solution fine, but not in any browser.
I cant start the video.
Im confused, because in the editor works and in the browser not.
Here is the code in the HTML block if you need it.
Hope any can help me, thx !
I uploaded a video with my problem to my webspace:
Code:
http://cyberpunks.info/vid/elementor.mp4
I know, elemtor have his own embed video overlay, but it does not have the required function.
I want the overlay to be always visible.
The video should run under the frame.
Therefore i have my own solution with the html block and java code
In the elementor editor work my solution fine, but not in any browser.
I cant start the video.
Im confused, because in the editor works and in the browser not.
Here is the code in the HTML block if you need it.
Hope any can help me, thx !
Code:
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Unbenanntes Dokument</title>
<style type="text/css">
.video {
margin-top: 100px;
width: 1000px;
}
.wrapper{
display:table;
width:auto;
position:relative;
width:50%;
}
.playpause {
background-image:url(http://cyberpunks.info/wp-content/uploads/2020/12/Header_Hg.png);
background-repeat:no-repeat;
width:1500px;
height:1500px;
position:absolute;
left:-20%;
right:0%;
top:30%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
</style>
</head>
<body>
<div class="wrapper">
<video class="video">
<source src="http://cyberpunks.info/vid/trailer.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
<script>$('.video').parent().click(function (){if($(this).children(".video").get(0).paused){$(this).children(".video").get(0).play(); $(this).children(".playpause").fadeIn();
}else{ $(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});</script>
</body>
</html>