logo标签列表

拒绝在iframe中显示YouTube视频

javascriptjqueryhtmltwitter-bootstrapyoutube
3
当我打开#myModal时，模态框出现并且我的视频可以播放。但是，当我点击#myModal2时，模态框出现了，但视频没有显示...
我错过了什么？
<div class="list-group">
    <h3 class="bg-ownmade paddingAll removeMargin">
        <span class="fa fa-book" aria-hidden="true"></span> Webbhistoria
    </h3>
    <a href="#" class="list-group-item" data-toggle="modal" data-target="#myModal" 
        data-keyboard="true"><span class="fa fa-film"></span> ABC</a>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                         &times;</button>
                    <h4 class="modal-title">Instruktionsvideo om...</h4>
                </div>
                <div class="modal-body">
                    <iframe width="100%" height="500px" 
                        src="https://www.youtube.com/embed/db-7J5OaSag" 
                        frameborder="0" allowfullscreen></iframe>
                    <p>Bla bla bla</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" 
                        data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="list-group-item" data-toggle="modal" 
        data-target="#myModal2" data-keyboard="true">
            <span class="fa fa-film"></span> ABC
    </a>
    <!-- Modal -->
    <div class="modal fade" id="myModal2" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" 
                        data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Instruktionsvideo om...</h4>
                </div>
                <div class="modal-body">
                    <iframe width="100%" height="500px" 
                        src="https://www.youtube.com/watch?v=IsXEVQRaTX8" 
                        frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" 
                        data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
</div>
1个回答
2

变更：

src="https://www.youtube.com/watch?v=IsXEVQRaTX8"

致：

src="https://www.youtube.com/embed/IsXEVQRaTX8"

由于安全原因，请求被拒绝：

由于设置了“X-Frame-Options”为“SAMEORIGIN”，所以拒绝在框架中显示“https://www.youtube.com/watch?v=IsXEVQRaTX8”。

请使用YouTube的嵌入URL。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接