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

Question

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

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

Answer 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/

Answer 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)

Answer 3

Я нашел это через Google, и мне нужно было сделать это не с помощью встраивания, а с новым (относительно) стилем iframe, который YouTube имеет для HTML5. Я обнаружил, что решение отсутствует в том, что оно не дифференцирует текстовые узлы от элементов (nextSibling в Firefox и nextSibling в IE). Кроме того, при нажатии на видео пользователю нужно было дважды щелкнуть мышью, один раз на изображении, затем один раз на плеере 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>

Answer 4

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