Breaking News: Grepper is joining You.com. Read the official announcement!

on button click video popup in html

Thomas coder answered on May 25, 2022 Popularity 9/10 Helpfulness 4/10

answer on button click video popup in html

on button click video popup in html

Comment

<html>
<style>
.modal {
  display: none; 
  position: fixed;
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4); 
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
<body>
       <h1>Contents of your page here</h1>
<button id="myBtn">Open Popup</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <video controls>
    <source src="video source here">
    </video>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

       <h1>(This example works using the modal property in CSS)</h1>

</body>
</html>

Popularity 9/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: button click html popup video

Link to this answer
Share Copy Link

Contributed on May 25 2022

Thomas coder

0 Answers Avg Quality 2/10

Closely Related Answers

onclick video popup in html

Comment

<!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">
	<title>Video Popup</title>
    <style>
    #fade {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
  }
  
  #light {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 600px;
    max-height: 360px;
    margin-left: -300px;
    margin-top: -180px;
    border: 2px solid #FFF;
    background: #FFF;
    z-index: 1002;
    overflow: visible;
  }
  
  #boxclose {
    float: right;
    cursor: pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 3px;
    background: #222222;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 1002;
    opacity: 0.9;
  }
  
  .boxclose:before {
    content: "×";
  }
  
  #fade:hover ~ #boxclose {
    display:none;
  }
  
  .test:hover ~ .test2 {
    display: none;
  }
    </style>
</head>

<body>
    <h1>CSS/Javascript popup with Lightbox effect</h1>

    <div id="light">
        <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
        <iframe id="VisaChipCardVideo" width="600" height="315" src="https://www.youtube.com/embed/HpaQQW_72ro"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
    </div>

    <div id="fade" onClick="lightbox_close();"></div>

    <div>
        <a href="#" onclick="lightbox_open();">Watch video</a>
    </div>
    
    <script>
    window.document.onkeydown = function (e) {
    	if (!e) {
        	e = event;
    	}
    	if (e.keyCode == 27) {
        	lightbox_close();
    	}
	}

	function lightbox_open() {
    	var lightBoxVideo = document.getElementById("VisaChipCardVideo");
    	window.scrollTo(0, 0);
    	document.getElementById('light').style.display = 'block';
    	document.getElementById('fade').style.display = 'block';
    	lightBoxVideo.play();
	}

	function lightbox_close() {
    	var lightBoxVideo = document.getElementById("VisaChipCardVideo");
    	document.getElementById('light').style.display = 'none';
    	document.getElementById('fade').style.display = 'none';
    	lightBoxVideo.pause();
	}
    </script>
</body>

</html>

Popularity 9/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: html onclick

Link to this answer
Share Copy Link

Contributed on Sep 06 2022

OHIOLee

0 Answers Avg Quality 2/10

on button click video popup in html

Contents

More Related Answers

on button click video popup in html

Closely Related Answers

onclick video popup in html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.