Vimeo видео и начальной загрузки модальный, динамическая загрузка contnent

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

Таким образом, на ссылку клик, я хочу, чтобы получить URL из vimeo video, и покажите это в модальном режиме. Но если я попробую это, я вижу эту ошибку в консоли.

XMLHttpRequest не может загрузить https://player.vimeo.com/video/158784449. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Происхождение '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> 

и вставить якорь 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>")); 
});