Vimeo 视频和 bootstrap 内容的模态动态加载

Question

我有一段代码：

<a href="https://www.player.vimeo.com/video/158784449" target="ifr" class="icon-play" data-toggle="modal" data-target=".video1"></a>

<!-- Video modal -->
<div class="modal video1" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
            <iframe name="ifr" src='' width="900" height="490" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
    </div>
</div>

<script>
$(document).on("click", "a", function (e) {
    e.preventDefault();
    var title = $(this).prop('title'),
        id = $(this).prop('id');
    $(".modal-title").text(title);
    $(".modal-body").html($("<iframe src=" + id + "></iframe>"));
});

所以，在 link 单击时，我想获取 url 的 vimeo 视频，并以模式显示。但是如果我尝试这样做，我会在控制台中看到这个错误。

XMLHttpRequest 无法加载 https://player.vimeo.com/video/158784449. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' 因此不允许访问。

模态 window 显示但没有内容。

Answer 1

我添加了一个 jsfiddle 在那里你可以检查哪里出了问题

要使其在不使用 https 的情况下在您的本地主机上运行，请像这样使用：

<a href="http://player.vimeo.com/video/158784449" target="ifr" class="icon-play" data-toggle="modal" data-target=".video1"></a>

<!-- Video modal -->
<div class="modal video1" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
            <iframe name="ifr" src='' width="900" height="490" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
    </div>
</div>

并将锚 href 插入 iframe src:

$(document).on("click", "a", function (e) {
    e.preventDefault();
    var title = $(this).prop('title'),
        href = $(this).prop('href');
    $(".modal-title").text(title);
    $(".modal-body").html($("<iframe src=" + href + "></iframe>"));
});

Vimeo 视频和 bootstrap 内容的模态动态加载

Vimeo video and bootstrap modal, dynamic loading of contnent

javascript

jquery

vimeo