Vimeo 视频和引导模式，动态加载内容答案

【问题标题】：Vimeo video and bootstrap modal, dynamic loading of contnentVimeo 视频和引导模式，动态加载内容
【发布时间】：2016-03-18 09:02:53
【问题描述】：

我有一段代码：

<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”标头。 Origin 'http://localhost' 因此不允许访问。

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

【问题讨论】：

你的 localhost 在 http。所以它不会在 iframe 中允许 https。

标签： javascript jquery vimeo

【解决方案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>"));
});

【讨论】：