如何仅在按钮单击时加载iframe

Question

我想要一个youtube视频iframe只有当＆＃34;观看视频＆＃34;单击按钮。目前，当页面加载时，视频iframe会在后台加载。

注意：我不是说，点击按钮播放视频。我的意思是，点击按钮

加载iframe

https://jsfiddle.net/kz0xxe22/

＆＃13;

＆＃13;

// Get the modal
var modal = document.getElementById('trailerdivbox');

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

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

var trailerbox = document.getElementById("close");

trailerbox.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";
  }
}

＆＃13;

/* Watch Trailer Button CSS */

#watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  /* This one removes the border of button */
  padding: 10px 12px;
}

#watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

#trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

＆＃13;

<button id="watchbutton">Watch Trailer &#9658</button>

<div id="close">
  <div id="trailerdivbox">
    <div class="videoWrapper">
      <iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将data-src属性更改为src，然后在点击该按钮时，将data-src设置为// Get the modal var modal = document.getElementById('trailerdivbox'); // Get the button that opens the modal var btn = document.getElementById("watchbutton"); var trailer = document.getElementById('trailervideo'); // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; trailer.setAttribute('src', trailer.getAttribute('data-src')); } var trailerbox = document.getElementById("close"); trailerbox.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"; } }

/* Watch Trailer Button CSS */

#watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  /* This one removes the border of button */
  padding: 10px 12px;
}

#watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}

#trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  /* Enable Scrolling */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

<button id="watchbutton">Watch Trailer &#9658</button>


<div id="close">
  <div id="trailerdivbox">
    <div class="videoWrapper">
      <iframe id="trailervideo" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

#application.html.erb
<%= javascript_include_tag :jquery, :jquery_ujs %>

#assets/javascripts/application.js
require jquery.js
require jquery_ujs

Answer 2

最简单的方法是在点击＆＃34;观看预告片＆＃34;时添加src属性。按钮！ ：）

＆＃13;

＆＃13;

// Get the modal
var modal = document.getElementById('trailerdivbox');

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



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



    //Add "src" attribute by getting the video and setting it with setAttribute.
    document.getElementsByClassName('trailervideo')[0].setAttribute('src', 'https://www.youtube.com/embed/TDwJDRbSYbw');



}

var trailerbox = document.getElementById("close");

trailerbox.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";
    }
}

＆＃13;

/* Watch Trailer Button CSS */
#watchbutton {
	background-color:#f2f2f2;
	color:red;
	font-weight:600;
	border: none; /* This one removes the border of button */
	padding: 10px 12px;

}

#watchbutton:hover {
	background-color:#e2e2e2;
	cursor:pointer;
}

#trailerdivbox {
	display:none;
	width: 100%;
	height:100%;
	position:fixed;
	overflow: auto; /* Enable Scrolling */
	background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	
	
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	max-width:560px;
	max-height:315px;
	width: 95%;
	height: 95%;
	left:0;
	right:0;
	margin:auto;
}

＆＃13;

<button id="watchbutton">Watch Trailer &#9658</button>


<div id="close">
<div id="trailerdivbox" >
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;