在网页上播放视频，就像点击图像后弹出一样

Play video on webpage like a pop up after clicking image

本文关键字：一样 图像 播放 网页 视频      更新时间：2023-09-26

我需要播放视频时播放按钮被点击。但我需要这个视频在同一个页面上播放，背景淡出。视频需要像弹出视频一样显示。我有问题，让视频来作为一个弹出当图像被点击。当我点击观看视频时，我需要它是这样的。我该怎么做呢?

<div class="col-md-12 f-play-video">
    <a href="https://youtu.be/7pvci1hwAx8"><img class="play-button" src="http://www.clipartbest.com/cliparts/bcy/Egx/bcyEgxxzi.png"></a>
</div>


.f-play-video{
text-align: center;
margin-top: 80px;
}
.play-button{
width:50px;
}
https://jsfiddle.net/4dd4ze53/3/

我猜模态框会解决你的问题。只需将您的视频代码插入到框中。

<head>
<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>
</head>
<body>
<button id="myBtn">Click here for video!</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p align="center">INSERT YOUR VIDEO HERE!</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

@ilmk， @A。Lau和@coskikoz，我设法让弹出工作使用引导模式。这是我的工作代码。

<div class="col-md-12 f-play-video" data-toggle="modal" data-target="#myModal">
    <img src="images/play-video.svg">
</div>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Video</h4>
            </div>
            <div class="modal-body">
                    <iframe width="100%" height="360" src="<iframe width="560" height="315" src="https://www.youtube.com/embed/7pvci1hwAx8?rel=0&amp;controls=0" "frameborder="0" allowfullscreen autoplay></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

您的示例使用onclick函数在文档末尾创建模型，并在正文顶部创建覆盖元素，然后在模型中添加文本并替换视频链接。

 onclick="return playYoutube("Achieve more everyday in your work and your daily life", this.href);"
相关文章：