Загрузить iframe только после нажатия

Question

Я пытаюсь встроить видео с использованием iframe, но это замедляет скорость загрузки страницы.

Как я могу сделать загрузку iframe только после того, как пользователь нажал сейчас?

<li class="embed-list"> 
    <?php echo $title; ?> 
    <span class="play">Play Now</span> 
    <div class="embed-video"> 
     <iframe src="http://www.thevideo.me/embed-<?php echo $link; ?>-640x360.html" frameborder="0" allowfullscreen></iframe> 
    </div> 
</li> 

jQuery('.embed-list').click(function() { 
    $this = jQuery(this); 
    $this.siblings().find('.embed-video').css('display', 'none'); 
    $this.find('.embed-video').css('display', 'block'); 
    $this.siblings('.embed-list').find('span').replaceWith("<span class='play'>Play Now</span>"); 
    $this.find('span').replaceWith("<span class='play'>Playing</span>"); 
}); 

Answer 1

У вас есть несколько способов решить эту проблему. Исходный JavaScript по сравнению с JavaScript в стороне, у вас есть выбор:

Вы могли бы 1) загрузить кадр со страницы обычно, но скрыть , пока пользователь не нажмет «Играть сейчас». Это может привести к тому, что пользователь во многих случаях увидит загруженное видео или страницу.

Или вы могли бы 2) добавить к DOM, когда пользователь нажимает кнопку «Воспроизвести сейчас», эффективно заставляя видео или страницу загружаться в iframe, что требует времени.

Поскольку вы добавили это с JQuery, вот, как вы могли бы выполнить первый путь, описанный выше, с использованием JQuery:

Скрывает контейнер и переключает его

$(function(){ 
    var $play_button = $('.play'); 
    var $iframe_container = $('.embed-video'); 

    $iframe_container.hide(); 
    $play_button.on('click',function(){ 
    $iframe_container.toggle(); 
    }); 
}); 

Или использовать Блочный код вы упомянули, вы можете сделать это:

$(function() { 
    var $video = $('.embed-video').hide(); 
    jQuery('.embed-list').click(function() { 
    $this = jQuery(this); 
    $video.show(); 
    $this.siblings('.embed-list').find('span').replaceWith("<span class='play'>Play Now</span>"); 
    $this.find('span').replaceWith("<span class='play'>Playing</span>"); 
    }); 
}); 

в действии здесь: http://codepen.io/anon/pen/OVEKwR