是否有任何类似于 bootstrap 中的弹出窗口，即使弹出窗口被阻止仍会播放？

Question

我只是 UI 设计的初学者，如果这个问题看起来很愚蠢，请道歉。 当有人点击 URL 时，我试图在我的网站的弹出窗口中播放视频，但即使浏览器阻止了弹出窗口，我仍然希望它播放。

我尝试在主页播放视频，播放完成后它就消失了，但不是那个亮点（请参阅主页中的黑框）。 所以我希望通过像第二张图片那样淡化背景来使其看起来更加突出。

我的重点是在单击主页按钮时在图像（大图像）中显示的框中自动播放视频。

任何人都可以帮助我在此页面上使用圆形拇指指甲http://www.paramvah.com/about.html 图片不断旋转，每张图片的内容也会不断变化。

Answer 1

 <div id="myModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">YouTube Video</h4>
			</div>
			<div class="modal-body">
				<div class="video_holder">
				  <video id="video_player" controls="controls" poster=""> 
					<source id="video_mp4" src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
				  </video>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function(){
// this line will open your modal when url hits
	$('#myModal').modal('show'); 
	// video will play using this
	$("#video_player")[0].play();
	OR
	$("#video_player")[0].autoplay = true;
});
</script>

Answer 2

仅适用于 youtube： 下面将显示一个模态并使用 youtube 的 ?autoplay=1 自动播放视频。

$(document).ready(function () {
    var url = $("#Video").attr('src');

    $("#myModal").on('hide.bs.modal', function () {
        $("#Video").attr('src', '');
    });

    $("#myModal").on('show.bs.modal', function () {
        $("#Video").attr('src', url);
    });

    $("#myModal").modal(); //Display modal on load

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example {
        margin: 20px;
    }

    .modal-content iframe {
        margin: 0 auto;
        display: block;
    }
</style>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">YouTube Video</h4>
            </div>
            <div class="modal-body">
                <iframe id="Video" width="420" height="345" src="http://youtube.com/embed/ZNgvZE0MLeo?autoplay=1" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>