Fancybox Vimeo показывает белый экран при нажатии

Question

Я добавил всплывающее окно vimeo на свою домашнюю страницу. Когда вы нажимаете кнопку «Воспроизвести», появляется окно, но у него есть все белые квадраты. Никаких сообщений об ошибках не появляется там или в dreamweaver. Я просматриваю это в Google Chrome, его белом ящике. В Safari он продолжает загружаться, а видео никогда не отображается. Когда я меняю ссылку на видео youtube ... это работает отлично. Вот код.

`<a class="fancybox fancybox.iframe" href="http://vimeo.com/72441143"><img src="../MSK-Site/Graphics/play.png" style="position:fixed; left:550px; bottom:450px;" /></a>` 

здесь является JQuery

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".fancybox").fancybox({ 
     width : '70%', 
     height : '70%' 
     }); 
    }); 

---

Ok Это то, что я в ответ на ваш ответа- JFK

<script type="text/javascript"  
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="../MSK-Site/js/fancy- 
box/source/jquery.fancybox.css"> 
<script type="text/javascript" src="../MSK-Site/js/fancy- 
box/source/jquery.fancybox.pack.js"></script> 
<script type="text/javascript" src="../MSK-Site/js/fancy- 
box/source/helpers/jquery.fancybox-media.js"></script> 

и

<a class="fancybox fancybox.iframe" href="http://player.vimeo.com/video/72441143?  
autoplay=1"><img src="../MSK-Site/Graphics/play.png" style="position:fixed; left:550px; 
bottom:450px;" /></a> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     width: '70%', 
     height: '70%', 
     helpers: { 
      media: {} 
     } 
    }); 
}); 
</script> 

Answer 1

Вы не можете содержать Vimeo внутри iframe, как вы можете видеть в этом JSFIDDLE. Скорее всего, используют x-frame, чтобы избежать этого.

Если вы хотите смотреть видео Vimeo внутри с помощью iframe FancyBox то у вас есть два варианта:

---

1). Изменение формата вашего HTML использовать Vimeo-х player в href вашего якоря, как:

<a class="fancybox fancybox.iframe" href="http://player.vimeo.com/video/72441143?autoplay=1">vimeo</a> 

См JSFIDDLE

---

2). Используйте FancyBox с носителями Helper (рекомендуется)

Оставьте свой HTML якорь как

<a class="fancybox fancybox.iframe" href="http://vimeo.com/72441143">vimeo</a> 

затем загрузить FancyBox медиа Helper расслоение плотной файл

<script type="text/javascript" src="pathTofancybox/helpers/jquery.fancybox-media.js"></script> 

и изменить свой скрипт для загрузки помощника, как:

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     width: '70%', 
     height: '70%', 
     helpers: { 
      media: {} 
     } 
    }); 
}); 

См. JSFIDDLE