javascript - Vimeo 视频和引导模式，动态加载内容

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>"));
});

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

XMLHttpRequest 无法加载 https://player.vimeo.com/video/158784449 。请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://localhost ' 因此不允许访问。

显示了模态窗口，但没有内容。

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>

并将 anchor 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>"));
});