Hello, I have different overlay images on iframe vimeo videos. As I have several embeded vimeo videos and overlay images, I would like to add a script so that when I click on one overlay image it doesn't apply to all the overlay images on the page.
<script>
function myFunction() {
document.getElementById("vid").style.display = "block";
document.getElementById("vid2").style.display = "block";
}
$('#iframe_id_wrapper').click(function() {
//run function that records clicks
});
How to have multiple ids and return multiple elements
in JavaScript
Posted
Hello, I have different overlay images on iframe vimeo videos. As I have several embeded vimeo videos and overlay images, I would like to add a script so that when I click on one overlay image it doesn't apply to all the overlay images on the page.
Here's the code, thanks
<!DOCTYPE html>
<html>
<head>
<style>
#vid {
display: none;
margin-top: -365px;
z-index:1;
}
#vid2 {
display: none;
margin-top: -365px;
z-index:1;
}
#iframe_id { pointer-events: none; }
</style>
</head>
<body>
<img src="https://www.ebnerfilm.com/wp-content/uploads/2019/08/LV_INTERVIEW_GIF_PLAY.gif" class="gliphy" onclick="myFunction()">
<div id="vid">
<iframe src="https://player.vimeo.com/video/353777739" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<img src="https://www.ebnerfilm.com/wp-content/uploads/2019/08/LOIS_LANE_GIF_PLAY.gif" class="gliphy" onclick="myFunction()">
<div id="vid2">
<iframe src="https://player.vimeo.com/video/196409842" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<script>
function myFunction() {
document.getElementById("vid").style.display = "block";
document.getElementById("vid2").style.display = "block";
}
$('#iframe_id_wrapper').click(function() {
//run function that records clicks
});
</script>
</body>
</html>