Я использую WordPress ACF для вставки видео в iframe на этом сайте: sofiajannok.com
Видео начинается при прокрутке к видео, сама функция работает, и до того, как она воспроизводилась правильно, однако теперь она застревает в «цикле загрузки». Если вы нажмете кнопку воспроизведения внутри фрейма, он начнет воспроизводиться мгновенно. Есть идеи, в чем проблемы?
php (iframe с опциями)
<div class="slide-content cf">
<?php
$iframe = get_field('slide_video_oembed', $page_ID);
if($iframe): ?>
<div class="vid-fullscreen">
<?php
// get iframe HTML
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];
// add extra params to iframe src
$params = array(
'controls' => 1,
'hd' => 1,
'rel' => 0,
'autoplay' => 0,
);
$new_src = add_query_arg($params, $src);
$enableJS = '&enablejsapi=1';
$new_src .= $enableJS;
$iframe = str_replace($src, $new_src, $iframe);
// add extra attributes to iframe html
$attributes = 'allowfullscreen';
$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);
// echo $iframe
echo $iframe;
?>
</div>
<? endif; ?>
</div>
JS-функция:
/********************************************************
//AUTOPLAY IFRAME
- Autoplay video when iFrame is in view, pause when not
********************************************************/
play_i = 0;
jQuery(window).scroll(function() {
jQuery("iframe").each( function() {
$this = jQuery(this);
_src = $this.attr('src');
_ID = $this.attr('id');
_yPos = jQuery(window).scrollTop();
_thisHT = $this.height();
_thisTop = $this.offset().top;
_thisBottom = _thisTop + _thisHT;
if( _yPos > _thisTop*0.5 && _yPos < _thisBottom && play_i < 1) { //if iframe is in view
$this[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); //play video
play_i++;
} else {
$this[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); //pause video
}
});
});