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

我想要一个youtube视频Iframe，只有当点击“观看视频”按钮时。当前，当页面加载时，视频iframe在后台加载

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

//获取模式
var modal=document.getElementById（'trailerdivbox'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“watchbutton”）；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
var trailerbox=document.getElementById（“关闭”）；
trailerbox.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

/*观看拖车按钮CSS*/
#监视按钮{
背景色：#F2F2；
颜色：红色；
字号：600；
边界：无；
/*这一个删除了按钮的边框*/
填充：10px 12px；
}
#监视按钮：悬停{
背景色：#E2；
光标：指针；
}
#牵引箱{
显示：无；
宽度：100%；
身高：100%；
位置：固定；
溢出：自动；
/*启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
}
.视频包装器{
位置：相对位置；
垫底：56.25%；
/* 16:9 */
填充顶部：25px；
身高：0；
}
.videoWrapper-iframe{
位置：绝对位置；
最大宽度：560px；
最大高度：315像素；
宽度：95%；
身高：95%；
左：0；
右：0；
保证金：自动；
}

观看预告片►

您可以将

src

属性更改为

数据src

，然后单击按钮，将

src

设置为

数据src

//获取模式
var modal=document.getElementById（'trailerdivbox'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“watchbutton”）；
var traile=document.getElementById（'trailervideo'）；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
trailer.setAttribute（'src'，trailer.getAttribute（'data-src'）；
}
var trailerbox=document.getElementById（“关闭”）；
trailerbox.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

/*观看拖车按钮CSS*/
#监视按钮{
背景色：#F2F2；
颜色：红色；
字号：600；
边界：无；
/*这一个删除了按钮的边框*/
填充：10px 12px；
}
#监视按钮：悬停{
背景色：#E2；
光标：指针；
}
#牵引箱{
显示：无；
宽度：100%；
身高：100%；
位置：固定；
溢出：自动；
/*启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
}
.视频包装器{
位置：相对位置；
垫底：56.25%；
/* 16:9 */
填充顶部：25px；
身高：0；
}
.videoWrapper-iframe{
位置：绝对位置；
最大宽度：560px；
最大高度：315像素；
宽度：95%；
身高：95%；
左：0；
右：0；
保证金：自动；
}

观看预告片►

最简单的方法是在单击“观看拖车”按钮时添加

src

属性：）

//获取模式
var modal=document.getElementById（'trailerdivbox'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“watchbutton”）；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
//通过获取视频并使用setAttribute对其进行设置，添加“src”属性。
document.getElementsByClassName（'trailervideo'）[0].setAttribute（'src'，'https://www.youtube.com/embed/TDwJDRbSYbw');
}
var trailerbox=document.getElementById（“关闭”）；
trailerbox.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

/*观看拖车按钮CSS*/
#监视按钮{
背景色：#F2F2；
颜色：红色；
字号：600；
边框：无；/*此选项删除按钮的边框*/
填充：10px 12px；
}
#监视按钮：悬停{
背景色：#E2；
光标：指针；
}
#牵引箱{
显示：无；
宽度：100%；
身高：100%；
位置：固定；
溢出：自动；/*启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
.视频包装器{
位置：相对位置；
填充底部：56.25%；/*16:9*/
填充顶部：25px；
身高：0；
}
.videoWrapper-iframe{
位置：绝对位置；
最大宽度：560px；
最大高度：315像素；
宽度：95%；
身高：95%；
左：0；
右：0；
保证金：自动；
}

观看预告片►

为什么不尝试单击按钮上的

src

设置，而不是直接将其添加到HTML中。我已经回答了这个问题。你为什么再次提出同样的问题？可能是重复的问题