Новая страница

.video {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	-webkit-border-radius: 0.5rem;
	        border-radius: 0.5rem;
}

@media (min-width: 801px) {
	.video {
		height: 474px;
		padding-top: 0;
	}
}

.video_responsive {
	height: 0;
	padding-top: 56.25%;
}
.video__play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
    width: 100px;
    height: 100px;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);          
}

.video__play-button::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 100px;
	height: 80px;
	content: "";
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-35.20005 -41.33325 305.0671 247.9995'%3E%3Cpath d='M229.763 25.817c-2.699-10.162-10.65-18.165-20.748-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.553 7.652 7.6 15.655 4.903 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.903 56.85C7.6 149.68 15.553 157.681 25.65 160.4c18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.682-4.934c10.098-2.718 18.049-10.72 20.748-20.882 4.904-18.421 4.904-56.85 4.904-56.85s0-38.431-4.904-56.85' fill='%23EB3D1D'/%3E%3Cpath d='M93.333 117.559l61.333-34.89-61.333-34.894z' fill='%23fff'/%3E%3C/svg%3E") center center no-repeat;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.video__play-button:hover{
  opacity: .8;
}

.video__missing {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--vzlet-neutral-60);
}
.video__missing .h2 {
	margin-bottom: 0;
	color: var(--vzlet-primary-main);
}
.video__image, .video__thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video__image img, .video__thumbnail img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	border-width: 0;
	outline-width: 0;
}

document.addEventListener("DOMContentLoaded", () => { 

  function youtube_parser(url){
    // let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
    let regExp = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
    let match = url.match(regExp);
    return (match&&match[1].length==11)? match[1] : false;
  }
  
  function youtubeVideo() {
    let youtubeVideos = document.querySelectorAll('.js-youtube-video');
    if (youtubeVideos.length > 0) {
      youtubeVideos.forEach(function(video) {
    
        // Создаём кнопку, клик по которой будет грузит iframe с видео и запускать его
        let button = document.createElement('button');
        button.classList.add('video__play-button');
      
        // Data-атрибуты из блока с видео
        let source = video.dataset.src;
        let image = video.dataset.image;
    
        // Если есть ссылка на видео
        if (source) {
          
          // Добавляем кнопку, которую создали ранее
          video.insertAdjacentElement('afterbegin', button);
    
          // Если есть картинка
          if (image) {
            // Грузим своё превью
            video.insertAdjacentHTML('beforeend', '<div class="video__image"><img src="' + image + '" alt="Видео-превью"></div>');
            // Удаляем data-атрибут
            video.removeAttribute('data-image');
          } else {
            // Грузим превью ютуба
            video.insertAdjacentHTML('beforeend', '<div class="video__thumbnail"><img src="https://i.ytimg.com/vi/' + youtube_parser(source) + '/maxresdefault.jpg" alt="Видео-превью"></div>');
          }

          // По клику грузим iframe с youtube и запускаем видео
          button.addEventListener('click', function(e) {
            e.preventDefault();
            video.insertAdjacentHTML('beforeend', '<iframe src="https://www.youtube.com/embed/' + youtube_parser(source) + '?rel=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>');
          });
    
        } else {
          // Показываем сообщение о том, что нет видео
          video.insertAdjacentHTML('beforeend', '<div class="video__missing"><div class="h2">Видео пропало</div><div>Простите за неудобство</div></div>');
        }
      });
    }
  }
  

  youtubeVideo();
});

<div class="video js-youtube-video" data-src="https://youtu.be/2VTyRYsTbZw" data-image="">
    <button class="video__play-button"></button>
    <div class="video__thumbnail">
        <img src="https://i.ytimg.com/vi/2VTyRYsTbZw/maxresdefault.jpg" alt="Видео-превью">
    </div>
</div>