Эффективный способ размещения видео с YouTube

Возможности:

Добавление видео одним элементом div с атрибутом youtube
Возможность устанавливать свой эскиз добавив атрибут poster
Ширина видеоролика задается в 100%, что позволяет ему правильно отображаться в любом контейнере и на любом экране.
Видео не загружается до тех пор, пока не запущено вручную, что не вредит скорости загрузки страницы.
Оформление рамки и кнопки плей под стиль сайта.

Примеры:

Постер с YouTube

Свой постер

HTML:

<div youtube="sox0tZuqpQA"></div>

1	<div youtube="sox0tZuqpQA"></div>

Где атрибут youtube - это ID видео, а постер берется в формате sddefault с обрезкой под 16:9. Другие форматы можно выбрать в теме про ссылки на эскизы и заменить путь в JS.

Или:

<div youtube="sox0tZuqpQA" poster="photo.jpg"></div>

1	<div youtube="sox0tZuqpQA" poster="photo.jpg"></div>

Где атрибут poster - путь к собственной картинке, которая также будет обрезаться под формат 16:9.

CSS:

.youtube-wrap {
	position: relative;
	max-width: 800px;
	margin: 20px auto;
	border: 6px solid #BFE2FF;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.youtube-wrap div[youtube] {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
	background: #000;
	cursor: pointer;
}
.youtube-wrap div[youtube]:before {
	content: "";  
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	border: 6px solid #BFE2FF;
	width: 80px;
	height: 80px;
	z-index: 3;
	box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
	position: absolute;
	top: 20px;
	left: 20px;	
/* Кнопка по центру */	
/*	
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%); 
*/
	transition: 0.5s;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' stroke='%23BFE2FF' fill='%23BFE2FF' stroke-linecap='round'%3e%3cpolygon points='5 3 19 12 5 21 5 3'%3e%3c/polygon%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 60%;
	background-position: 60% 50%;  
}
.youtube-wrap div[youtube]:hover:before {
	background-color: rgba(0, 0, 0, 0.7);
	border: 6px solid #FFF;
}
.youtube-wrap div[youtube].show:before,
.youtube-wrap div[youtube].show:after {
    display: none;
}
.youtube-wrap div[youtube] iframe,
.youtube-wrap div[youtube] img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 1;
}	
.youtube-wrap div[youtube] img {
	z-index: 2;
	object-fit: cover;
	object-position: 50% 50%;
}
@media screen and (max-width: 420px) {
	.youtube-wrap div[youtube]:before {
		width: 60px;
		height: 60px;
		border: 4px solid #BFE2FF;
	}
}

.youtube-wrap {

position: relative;

max-width: 800px;

margin: 20px auto;

border: 6px solid #BFE2FF;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.youtube-wrap div[youtube] {

position: relative;

padding-bottom: 56.25%;

height: 0;

background: #000;

cursor: pointer;

}

.youtube-wrap div[youtube]:before {

content: "";

border-radius: 50%;

background-color: rgba(0, 0, 0, 0.5);

border: 6px solid #BFE2FF;

width: 80px;

height: 80px;

z-index: 3;

box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);

position: absolute;

top: 20px;

left: 20px;

/* Кнопка по центру */

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

transition: 0.5s;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' stroke='%23BFE2FF' fill='%23BFE2FF' stroke-linecap='round'%3e%3cpolygon points='5 3 19 12 5 21 5 3'%3e%3c/polygon%3e%3c/svg%3e");

background-repeat: no-repeat;

background-size: 60%;

background-position: 60% 50%;

}

.youtube-wrap div[youtube]:hover:before {

background-color: rgba(0, 0, 0, 0.7);

border: 6px solid #FFF;

}

.youtube-wrap div[youtube].show:before,

.youtube-wrap div[youtube].show:after {

display: none;

}

.youtube-wrap div[youtube] iframe,

.youtube-wrap div[youtube] img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

.youtube-wrap div[youtube] img {

z-index: 2;

object-fit: cover;

object-position: 50% 50%;

}

@media screen and (max-width: 420px) {

.youtube-wrap div[youtube]:before {

width: 60px;

height: 60px;

border: 4px solid #BFE2FF;

}

jQuery:

$(function() {
    $('div[youtube]').each(function() {
		$(this).wrap('<div class="youtube-wrap"></div>');
		let youtube = $(this).attr('youtube');
		let image = $(this).attr('poster');
		if (image) {
			$(this).html('<img alt="" src="'+ image +'" />');   
		} else {
			$(this).html('<img alt="" src="https://i.ytimg.com/vi/'+ youtube +'/sddefault.jpg" />'); 
		}
	}); 
	$('div[youtube]').click(function() {
		if (!$(this).hasClass('show')) {
			$(this).addClass('show');	
			$(this).append('<iframe src="https://www.youtube.com/embed/'+ $(this).attr('youtube') +'?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
			$(this).children('img').fadeOut('slow');
		} 
	});
});

$(function() {

$('div[youtube]').each(function() {

$(this).wrap('<div class="youtube-wrap"></div>');

let youtube = $(this).attr('youtube');

let image = $(this).attr('poster');

if (image) {

$(this).html('<img alt="" src="'+ image +'" />');

} else {

$(this).html('<img alt="" src="https://i.ytimg.com/vi/'+ youtube +'/sddefault.jpg" />');

}

});

$('div[youtube]').click(function() {

if (!$(this).hasClass('show')) {

$(this).addClass('show');

$(this).append('<iframe src="https://www.youtube.com/embed/'+ $(this).attr('youtube') +'?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');

$(this).children('img').fadeOut('slow');

}

});

Дмитрий: 20.05.2024 в 14:55

Спасибо, всё работает.

Ответить
Владимир: 12.02.2023 в 08:04

Доброго времени суток уважаемый. Вопрос, почему некоторые скрипты невозможно вынести во внешний файл, включая данный на ютуб? Он не срабатывает если например создать youtub.js и разместить его хоть до, хоть после разметки.

Ответить
- Alexander: 13.02.2023 в 13:02
  
  Все возможно и даже желательно выносить в 1 внешний файл со всеми скриптами.
  Если не работает, нужно смотреть какую выдает ошибку.
  
  Ответить
  - Владимир: 14.02.2023 в 13:57
    
    Мне тяжело скрипты даются, максимум подредактировать могу что-то. Замечаю всякие мелочи вроде того что недостаточно просто удалить строку в скрипте, чтобы удалить с сайта тот или иной элемент. Он просто не будет исполняться.
    Но вот тут вопрос встал так,скрипт рабочий, а во внешнем файле не работает.У вас я заметил тоже он в страницу встроен.
    Я подозреваю приоритет играет свою роль при конфликте с другими скриптами.
    
    Ответить
    - Alexander: 14.02.2023 в 14:39
      
      У меня почти все в страницу встроено, так удобнее статью сформировать.
      Дайте ссылку на ваш результат
      
      Ответить
      - Владимир: 16.02.2023 в 12:26
        
        Да спасибо не будем этому лишнее внимание уделять. Думал может есть сходу какое то правило о котором я не знаю. Это скорее всего конфликт какой-то.
        
        Ответить