Итак, я немного взламываю изображение неподвижного изображения поверх встроенного видео YouTube (которое YouTube дает мне как iFrame). Идея состоит в том, что пользователь нажмет статическое изображение (большое цветное окно в демо выше), а затем я использую jQuery, чтобы скрыть изображение и удалить iFrame там, где он был. Я установил видео для автовоспроизведения и бум, он начинает играть.Почему изотопные беспорядки застревают в iFrame?
код прост, это несколько из этих видео блоков:
<div class='videoblock yellow'>
<div data-videoid="7ZLywQpPgcA" class='overlay'>Click this text to play</div>
<div class="thevideo"></div>
</div>
А затем код инициализация изотопа, и обработчик событий, чтобы поменять в видео YouTube по щелчку:
$(function() {
$('#iso').isotope({ itemSelector : '.videoblock' });
});
// when the user clicks, hide the overlay, put the html code in for the iFrame and show it
$('.overlay').click(function() {
vid = $(this).data('videoid');
h = '<iframe width="435" height="265" src="//www.youtube.com/embed/'+vid+'?autoplay=1" frameborder=0 allowfullscreen></iframe>';
$(this).hide(); $(this).next().show().html(h);
});
jsfiddle демо: http://jsfiddle.net/pnoeric/MeL7a/7/
проблема заключается в том, что этот метод отлично работает в Chrome (Mac) и Safari, но в Firefox клики не влияют на видео на YouTube. Кнопка паузы не работает, хотя YouTube может видеть, как я нависаю над кнопкой.
Почему это? И как я могу это исправить? :-)
(я также открыт для любой лучшей техники для отображения неподвижного изображения поверх видео YouTube ...)
[Duopixel] (http://stackoverflow.com/questions/17747443/css-transform-translate-breaking-youtube-embedded-video?answertab=votes#tab-top) имеет решение, добавив '& html5 = 1 'в URL для встраивания YouTube. [Firefox поддерживает видео HTML5] (http://caniuse.com/video) обратно в версию 3.5, поэтому он должен быть безопасным. –