Как реализовать подгрузку элемента при скролле до него?

Question

[Виталий]

Есть вставленное видео из ютуба в середине страницы. В настройках я задал автоплей, чтоб видео воспроизводилось атоматом. Оно воспроизводится сразу, как загрузилась страница.
Но мне надо, чтоб видео воспроизводилось при скролле до него.

<section class="video">
	<div class="container">
		<h2></h2>
		<iframe class="youtube_video" width="800" height="450" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&amp;showinfo=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
	</div>
</section>

Подскажите, пожалуйста

Answer 1

[Кирилл]

Используя событие onscroll проверить, на сколько пикселей прокрутили страницу и в зависимости от этого включать воспроизведение: learn.javascript.ru/onscroll

Comments

[Виталий]

я просто нуб в js.
Я пытался сделать так, но не совсем понимаю события. А сделать надо сегодня.
$(window).scroll(function(){
var scroll = $(".youtube_video").scrollTop(); здесь я получаю скролл до элемента)
if ($(window).scrollTop(scroll)){
$(".youtube_video").ready();
}
помогите, пожалуйста, если это не сложно

Answer 2

[Дима Паутов]

Поддерживаю ответ Кирила. Так же, вы можете использовать плагин viewportcheker для выявления видимых элементов в вьюпорте или аналогичные.

Comments

[Виталий]

да не. Использовать плагин для такой мелочи. Мне кажется не резонно

Answer 3

[Равшан Абдулаев]

Может все таки не скрол? Как сделать проигрывание html 5 видео при наведение мыши?

Comments

[Виталий]

нет, именно скролл