Как на WP вставить видео с youtube, чтобы она загрузку страницы не убивала?

Question

[Алексей]

Добрый день, подскажите пожалуйста как вставить видео с youtube, чтобы закгрузка не упала на WP. Пробовал ставить проверенный вариант, но он не работает на WP. Или можно просто frame с youtube поставить ? Видео на сайте с youtube будет 1.
Пример который пробывал, ставил раньше работал, на WP чего-то не хочет, кидает ошибку.

function findVideos() {
  let videos = document.querySelectorAll('.service-video');

  for (let i = 0; i < videos.length; i++) {
    setupVideo(videos[i]);
  }
}

function setupVideo(video) {
  let link = video.querySelector('.video__link');
  let media = video.querySelector('.video__media');
  let button = video.querySelector('.video__button');
  let id = parseMediaURL(media);

  video.addEventListener('click', () => {
    let iframe = createIframe(id);

    link.remove();
    button.remove();
    video.appendChild(iframe);
  });

  link.removeAttribute('href');
  video.classList.add('video--enabled');
}

function parseMediaURL(media) {
  let regexp =
    /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
  let url = media.src;
  let match = url.match(regexp);

  return match[1];
}

function createIframe(id) {
  let iframe = document.createElement('iframe');

  iframe.setAttribute('allowfullscreen', '');
  iframe.setAttribute('allow', 'autoplay');
  iframe.setAttribute('src', generateURL(id));
  iframe.classList.add('video__media');

  return iframe;
}

function generateURL(id) {
  let query = '?rel=0&showinfo=0&autoplay=1';

  return 'https://www.youtube.com/embed/' + id + query;
}

findVideos();

Comments

[Сергей Арсентьев]

так может проще плагином ставить видео в страницу?

[Алексей]

Сергей Арсентьев, я сразу про это и подумал, но вставил видео и просто frame и вроде норм. Когда ставил не на WP всегда были проблемы. А какой может плагин лучше поставетуте, который минимально влияет на загрузку ?

[Владимир Брумер]

Просто выводите в каких-либо тегах текст мол смотреть видео жирным шрифтом, а в дата атрибут ссылку кинте. Ну и по клику на тег забирайте дата ссылку и разверните ифрайм с затемнением контента....

[Алексей]

Владимир Брумер, так это тоже самое что я скидывал. Но почему не срабывает скрипт ?

[Владимир Брумер]

Алексей,

Просто выводите в каких-либо тегах текст мол смотреть видео жирным шрифтом, а в дата атрибут ссылку кинте. Ну и по клику на тег забирайте дата ссылку и разверните ифрайм с затемнением контента....

я таким образом делаю:

<div class="youtuBik" data-src="https://www.youtube.com/embed/neHA4MJwpnY">Смотреть видео на ютуб канале «Пилот, разборы, ответы и лайвы»</div>

$(document).on('click','.youtuBik',function(){
	var youtuBik=document.createElement('div'),he=$(window).height();
	youtuBik.className="VAB_youtuBik";
	youtuBik.innerHTML	= '<style>'+
													'.VAB_youtuBik{'+
														'position:fixed;'+
														'height:100%;'+
														'width:100%;'+
														'z-index:999999;'+
														'background:rgba(0,0,0,0.9);'+
														'left:0;top:0;'+
														'bottom:0;'+
														'text-align:center;'+
													'}'+
													'.VAB_youtuBik iframe{'+
														'margin-top:'+he/12.5+'px;'+
													'}'+
												'</style>'+
												'<center>'+
													'<iframe width="75%" height="'+he/1.25+'" src="'+$(this).attr('data-src')+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'+
												'</center>';
	CenterBlock.insertBefore(youtuBik,CenterBlock.children[0]);
	$(document).on('click','.VAB_youtuBik',function(){
		$('.VAB_youtuBik').fadeOut(function(){
			$('.VAB_youtuBik').remove();
		});
		return false;
	});
});

CenterBlock - это id div`а центрально блока(задайте любой свой)

[Сергей Арсентьев]

Алексей, я делаю примерно вот так https://youtu.be/O6k2O6tIs6E
плагин бесплатный Shortcodes Ultimate, пользуюсь уже пару лет, все норм, в мобиле тоже корректно работает.

для lazy load сразу ставлю какой-нить плагин вроде https://ru.wordpress.org/plugins/a3-lazy-load/
в этом случае превьюшки видео и код грузится не сразу при загрузке страницы, а потом, уже при скроллинге вниз.
с точки зрения google page speed проблем в таком использовании или тормозов не замечал.

Answer 1

[victoriavv]

function findVideos() {
    let videos = document.querySelectorAll('.video');

    for (let i = 0; i < videos.length; i++) {
        setupVideo(videos[i]);
    }
}

function setupVideo(video) {
    let link = video.querySelector('.video__link');
    let media = video.querySelector('.video__media');
    let button = video.querySelector('.video__button');
    let id = link.dataset.id;
    video.addEventListener('click', () => {
        let iframe = createIframe(id);
        link.remove();
        button.remove();
        video.appendChild(iframe);
    });
    link.removeAttribute('href');
    video.classList.add('video--enabled');
}

function createIframe(id) {
    let iframe = document.createElement('iframe');
    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('allow', 'autoplay');
    iframe.setAttribute('src', generateURL(id));
    iframe.classList.add('video__media');
    return iframe;
}

function generateURL(id) {
    let query = '?rel=0&showinfo=0&autoplay=1';
    return 'https://www.youtube.com/embed/' + id + query;
}
findVideos();

Попробуйте этот скрипт, только надо еще добавить атрибут data-id с идентификатором видео в ссылку:

<div class="video">
        <a class="video__link" data-id="<? echo get_field('single-product-video'); ?>" href="https://youtu.be/<? echo get_field('single-product-video'); ?>">
            <img class="video__media" src="https://i.ytimg.com/vi/<? echo get_field('single-product-video'); ?>/maxresdefault.jpg" alt="<? the_title(); ?>">
        </a>
        <button class="video__button" aria-label="Запустить видео">
            <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
        </button>
    </div>

Comments

[Алексей]

Добрый день, не пойму где ошибка у меня не работает. Распишите нормально куда вставлять ссылку с видео ?

[victoriavv]

<div class="video">
        <a data-id='neHA4MJwpnY' class="video__link" href="https://youtu.be/neHA4MJwpnY">
            <picture>
                <source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp">
                <img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы">
            </picture>
        </a>
        <button class="video__button" aria-label="Запустить видео">
            <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
        </button>
    </div>

[Алексей]

victoriavv, спасибо, заработало, но проблема frame дублируется при любом нажатии. Как решить эту проблему ?