Нажмите на изображение (заставку), чтобы воспроизвести встроенный фильм Youtube

Мне было интересно, как сделать что-то, как следует:

Я хочу иметь изображение, которое отображает всплывающее изображение, нажимая на это изображение, которое будет воспроизводиться a youtube Movie в том же месте. (чтобы быть ясным, я не хочу показывать встроенный плеер напрямую, но сначала кликабельное изображение)

Ответ 1

Попробуйте что-то вроде этого:

<img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">
$('img').click(function(){
var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video); });

здесь: http://jsfiddle.net/2fAxv/1/

Ответ 2

Здесь, как это сделать, используя jQuery. Предыдущие приведенные примеры все еще воспроизводили видео, даже когда контейнер был скрыт.

Создайте контейнер для хранения миниатюры:

<div id="video"></div>

Затем вы можете настроить миниатюру в CSS следующим образом:

#video {
    display: block;
    width: 320px;
    height: 240px;
    background: url(images/my_video_thumb.jpg) no-repeat top left;
}

... и затем вы хотите удалить фон и создать свой iframe на лету, используя jQuery с чем-то вроде этого:

$('#video').on('click', function() {
    $(this).html('<iframe src="http://www.youtube.com/embed/abcdef12345?rel=0&autoplay=1" width="320" height="240" frameborder="0" allowfullscreen="true">').css('background', 'none');
});

Демо: codepen (включает в себя пример VanillaJS и jQuery)

Ответ 3

Я нашел это через Google и должен был сделать это не с встраиванием, а с новым (относительно) iframe-стилем, который YouTube имеет для HTML5. Я обнаружил, что решение отсутствует, поскольку оно не отличало текстовые узлы от элементов (firefox nextSibling и IE nextSibling). Кроме того, при нажатии на клик пользователю нужно дважды щелкнуть дважды на изображении, а затем на проигрывателе YouTube. Это фиксируется с помощью значка автозапуска в URL-адресе YouTube. Окончательное поведение правильное в Chrome, Firefox, IE 7+ и т.д.

Вот мое окончательное решение:

<script type="text/javascript">
    function actualNextSibling(el) {    // needed to smooth out default firefox/IE behavior
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>
<div onclick="actualNextSibling(this).style.display='block'; this.style.display='none'">
    <img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>
<div style="display: none">
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe>
</div>

Ответ 4

вы можете сделать div с видео и изображением, скрыть видео (display:none), при щелчке изображения, скройте его и покажите видео.