Question

单击播放按钮时我需要播放视频。但是我需要这个视频在背景淡出的同一页面上播放。视频需要像弹出视频一样显示。单击图像时，我在弹出视频时遇到问题。当我点击观看视频时，我需要它像this。我怎么能这样做呢？

<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/

Answer 1

关注@ ilmk，@ A.Lau和@coskikoz，我设法使用bootstrap模式弹出工作。这是我的工作代码。

<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>

Answer 2

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

   select distinct z.brandname from zonerpm z left join companydetails cd 
   on cd.companyname=z.companyname where  
   z.trainer=@tname;

Answer 3

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

Sprockets::SassCompressor

点击图片后弹出的网页上播放视频

3 个答案: