/https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i/https:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/, но еще и сообразил, что проблема существует в let url = media.src; и в html ссылки. Человек заинтересован был дать настоящий ответ, за что я его отблагодарил! Это вообще-то сервис вопросов и ответов, а не помощи.
<div class="video" >
<!-- ВСТАВКА iD ВИДЕО -->
<a class="video__link" href="https://youtu.be/KkcrQTqr9q4">
<picture>
<source srcset="/wp-content/uploads/2020/10/maxresdefault-3.webp" type="image/webp">
<img class="video__media" src="/wp-content/uploads/2020/10/maxresdefault-3.webp" type="image/jpg">
</picture>
</a>
<!-- ВСТАВКА iD ВИДЕО -->
<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>
</div>
</div><script>
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 = 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();
</script>let regexp = /https:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/;<script>
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 = 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:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/;
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();
</script>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 = 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:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/;
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();