ТВ-рамки для видео из YouTube

Для всех примеров используется одинаковый jQuery код для подстановки в рамку скриншота и замены его на видео по клику.

$(function() {	
    $('.tv-video').each(function() {  
		let image = $(this).attr('data-video');
        $(this).html('<img alt="" src="https://i.ytimg.com/vi/'+ image +'/hq720.jpg" />');   
	}); 	
	$('.tv-video').click(function() {
		$(this).addClass('show');
        let video = $(this).attr('data-video');
		$(this).html('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ video +'?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
	});
});

$(function() {

$('.tv-video').each(function() {

let image = $(this).attr('data-video');

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

});

$('.tv-video').click(function() {

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

let video = $(this).attr('data-video');

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

});

<div class="ram-video-1">
	<div class="tv-wrap">
		<div class="tv-ram">
			<img alt="" src="ram-1.png" />
		</div>
		<div data-video="Xv1JzYDKoc8" class="tv-video"></div>
	</div>
</div>

</div>

</div>

Где:

Атрибут data-video - ID видео из YouTube
Рамка: ram-1.png (скачать)

.ram-video-1 {
	position: relative;
	max-width: 800px;
	margin: auto;
}
.ram-video-1 .tv-wrap  {
	margin: 6% 6% 10%;
	position: relative;
}	
.ram-video-1 .tv-ram  {
	position: absolute;
	z-index: 1;
	top: -16%;
	left: -11.5%;
	width: 123%;
	height: 142%;
	pointer-events: none;
}
.ram-video-1 .tv-ram img  {
	width: 100%;
	height: 100%;
}
.ram-video-1 .tv-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
	background: #000;
	cursor: pointer;
}
.ram-video-1 .tv-video:before {
    content: "";	
	border: 3px solid #6a6a6c;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.7);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFE2FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolygon points='10 8 16 12 10 16 10 8'%3e%3c/polygon%3e%3c/svg%3e ");
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: 50% 50%;
	width: 20%;
	height: 25%;
	z-index: 2;
	box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
	position: absolute;
	top: 35%;
	left: 40%;	
	transition: 0.3s;
}
.ram-video-1 .tv-video:hover:before {
	background-color: #337AB7;
	border-color: #BFE2FF;
}
.ram-video-1 .tv-video.show:before {
    display: none;
}
.ram-video-1 .tv-video iframe,
.ram-video-1 .tv-video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ram-video-1 {

position: relative;

max-width: 800px;

margin: auto;

}

.ram-video-1 .tv-wrap {

margin: 6% 6% 10%;

position: relative;

}

.ram-video-1 .tv-ram {

position: absolute;

z-index: 1;

top: -16%;

left: -11.5%;

width: 123%;

height: 142%;

pointer-events: none;

}

.ram-video-1 .tv-ram img {

width: 100%;

height: 100%;

}

.ram-video-1 .tv-video {

position: relative;

padding-bottom: 56.25%;

height: 0;

background: #000;

cursor: pointer;

}

.ram-video-1 .tv-video:before {

content: "";

border: 3px solid #6a6a6c;

border-radius: 20px;

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

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFE2FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolygon points='10 8 16 12 10 16 10 8'%3e%3c/polygon%3e%3c/svg%3e ");

background-repeat: no-repeat;

background-size: 50%;

background-position: 50% 50%;

width: 20%;

height: 25%;

z-index: 2;

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

position: absolute;

top: 35%;

left: 40%;

transition: 0.3s;

}

.ram-video-1 .tv-video:hover:before {

background-color: #337AB7;

border-color: #BFE2FF;

}

.ram-video-1 .tv-video.show:before {

display: none;

}

.ram-video-1 .tv-video iframe,

.ram-video-1 .tv-video img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Вариант 2:

HTML
CSS

<div class="ram-video-2">
	<div class="tv-wrap">
		<div class="tv-ram">
			<img alt="" src="ram-2.png" />
		</div>
		<div data-video="o_accAVzhoE" class="tv-video"></div>
	</div>
</div>

</div>

</div>

Где:

Атрибут data-video - ID видео из YouTube
Рамка: ram-2.png (скачать)

.ram-video-2 {
	position: relative;
	max-width: 800px;
	margin: auto;
}
.ram-video-2 .tv-wrap  {
	margin: 6% 6% 26%;
	position: relative;
}	
.ram-video-2 .tv-ram  {
	position: absolute;
	z-index: 1;
	top: -8.3%;
	left: -9%;
	width: 119%;
	height: 170%;
	pointer-events: none;
}
.ram-video-2 .tv-ram img  {
	width: 100%;
	height: 100%;
}
.ram-video-2 .tv-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
	background: #000;
	cursor: pointer;
}
.ram-video-2 .tv-video:before {
    content: "";	
	border: 3px solid #6a6a6c;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.7);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFE2FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolygon points='10 8 16 12 10 16 10 8'%3e%3c/polygon%3e%3c/svg%3e ");
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: 50% 50%;
	width: 20%;
	height: 25%;
	z-index: 2;
	box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
	position: absolute;
	top: 35%;
	left: 40%;	
	transition: 0.3s;
}
.ram-video-2 .tv-video:hover:before {
	background-color: #337AB7;
	border-color: #BFE2FF;
}
.ram-video-2 .tv-video.show:before {
    display: none;
}
.ram-video-2 .tv-video iframe,
.ram-video-2 .tv-video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ram-video-2 {

position: relative;

max-width: 800px;

margin: auto;

}

.ram-video-2 .tv-wrap {

margin: 6% 6% 26%;

position: relative;

}

.ram-video-2 .tv-ram {

position: absolute;

z-index: 1;

top: -8.3%;

left: -9%;

width: 119%;

height: 170%;

pointer-events: none;

}

.ram-video-2 .tv-ram img {

width: 100%;

height: 100%;

}

.ram-video-2 .tv-video {

position: relative;

padding-bottom: 56.25%;

height: 0;

background: #000;

cursor: pointer;

}

.ram-video-2 .tv-video:before {

content: "";

border: 3px solid #6a6a6c;

border-radius: 20px;

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

background-repeat: no-repeat;

background-size: 50%;

background-position: 50% 50%;

width: 20%;

height: 25%;

z-index: 2;

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

position: absolute;

top: 35%;

left: 40%;

transition: 0.3s;

}

.ram-video-2 .tv-video:hover:before {

background-color: #337AB7;

border-color: #BFE2FF;

}

.ram-video-2 .tv-video.show:before {

display: none;

}

.ram-video-2 .tv-video iframe,

.ram-video-2 .tv-video img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Вариант 3:

HTML
CSS

<div class="ram-video-3">
	<div class="tv-wrap">
		<div class="tv-ram">
			<img alt="" src="ram-3.png" />
		</div>
		<div data-video="O_5gzXKnGYo" class="tv-video"></div>
	</div>
</div>

</div>

</div>

Где:

Атрибут data-video - ID видео из YouTube
Рамка: ram3.png (скачать)

.ram-video-3 {
	position: relative;
	max-width: 800px;
	margin: auto;
}
.ram-video-3 .tv-wrap  {
	margin: 6% 14% 16%;
	position: relative;
}	
.ram-video-3 .tv-ram  {
	position: absolute;
	z-index: 1;
	top: -8%;
	left: -17.5%;
	width: 135%;
	height: 143%;
	pointer-events: none;
}
.ram-video-3 .tv-ram img  {
	width: 100%;
	height: 100%;
}
.ram-video-3 .tv-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
	background: #000;
	cursor: pointer;
}
.ram-video-3 .tv-video:before {
    content: "";	
	border: 3px solid #6a6a6c;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.7);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFE2FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolygon points='10 8 16 12 10 16 10 8'%3e%3c/polygon%3e%3c/svg%3e ");
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: 50% 50%;
	width: 20%;
	height: 25%;
	z-index: 2;
	box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
	position: absolute;
	top: 35%;
	left: 40%;	
	transition: 0.3s;
}
.ram-video-3 .tv-video:hover:before {
	background-color: #337AB7;
	border-color: #BFE2FF;
}
.ram-video-3 .tv-video.show:before {
    display: none;
}
.ram-video-3 .tv-video iframe,
.ram-video-3 .tv-video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ram-video-3 {

position: relative;

max-width: 800px;

margin: auto;

}

.ram-video-3 .tv-wrap {

margin: 6% 14% 16%;

position: relative;

}

.ram-video-3 .tv-ram {

position: absolute;

z-index: 1;

top: -8%;

left: -17.5%;

width: 135%;

height: 143%;

pointer-events: none;

}

.ram-video-3 .tv-ram img {

width: 100%;

height: 100%;

}

.ram-video-3 .tv-video {

position: relative;

padding-bottom: 56.25%;

height: 0;

background: #000;

cursor: pointer;

}

.ram-video-3 .tv-video:before {

content: "";

border: 3px solid #6a6a6c;

border-radius: 20px;

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

background-repeat: no-repeat;

background-size: 50%;

background-position: 50% 50%;

width: 20%;

height: 25%;

z-index: 2;

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

position: absolute;

top: 35%;

left: 40%;

transition: 0.3s;

}

.ram-video-3 .tv-video:hover:before {

background-color: #337AB7;

border-color: #BFE2FF;

}

.ram-video-3 .tv-video.show:before {

display: none;

}

.ram-video-3 .tv-video iframe,

.ram-video-3 .tv-video img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Для установки альтернативных рамок нужно:

Найти подходящую рамку, например на сайте pngwing.com
Подогнать ее размеры под видео в классе: .tv-ram (делается это на глаз)
Задать отступы в классе .tv-wrap
Также можно установить максимальный размер для всего контейнера, который в примерах равен 800px

Антон: 02.05.2024 в 06:33

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

Ответить
- Alexander: 02.05.2024 в 09:34
  
  Ниже библиотеки jQuery
  
  Ответить
Алексей: 12.02.2022 в 21:10

Здравствуйте
Сайт не отображает видео, хоть я и вставил id с ютуба. В чем может быть проблема?

Ответить
- Алексей: 12.02.2022 в 21:12
  
  Извиняюсь) не добавил скрипт куда нужно. Все работает!
  
  Ответить
- Олег: 06.05.2022 в 17:56
  
  не показывает видео, куда и как поставить ссылку
  
  Ответить
  - Alexander: 06.05.2022 в 18:00
    
    Какую ссылку?
    Я без просмотра получившегося результата не смогу подсказать.
    
    Ответить
    - Олег: 06.05.2022 в 18:09
      
      просто скопировал этот код
      сперва поставил css
      потом html
      и скрипт
      но ничего не показывает
      
      Ответить
      - Alexander: 06.05.2022 в 18:27
        
        А как я должен угадать, почему не показывает?
        Может, jquery не подключена, может еще что то со скриптом....
        Он делает подмену атрибута data-video на картинку, а по клику на видео. Если нет ни того, ни другого, а только рамка, то ошибка в нем.
        
        Ответить

Вариант 1:

Где:

Вариант 2:

Где:

Вариант 3:

Где:

Для установки альтернативных рамок нужно:

Смотрите также:

Добавить комментарий:

Комментарии: