Как вставить видео с рамкой смартфона

Добавить HTML блок со стилями

<style>
.youtube {
  position: relative;
  width: 100%;
  max-width: 300px;
  height:620px;
  max-height:730px;
  margin-right: auto;
  margin-left: auto;
}

.youtube:before {
  content: "";
  display: block;
  padding-top: 50%;
}

.youtube:after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://linkrr.ru/uploads/backgrounds/iphone_bg.png) no-repeat center center;
  background-size: cover;
  pointer-events: none;
}

.youtube__iframe {
  position: absolute;
  top: 2.8%;
  left: 2.8%;
  width: 94.4%;
  height: 94.4%;
  z-index: 2;
  border-radius: 8%;
}

</style>

Пример:

 

Блок должен быть на первой позиции в списке блоков.

Стили добавляются только 1 раз для каждой страницы.

 

Добавить видео

Добавьте еще один HTML блок с кодом:

<div class="youtube">
  <iframe class="youtube__iframe" src="https://www.youtube.com/embed/2axxYw7Wy48?autoplay=1&loop=1&modestbranding=1&showinfo=0&rel=0&cc_load_policy=1&iv_load_policy=3&theme=light&fs=0&color=white&controls=0" width="" height="" frameborder="0"></iframe>
</div>

 В  https://www.youtube.com/embed/kJQP7kiw5Fk подставьте id своего видео.

Например, в браузере видео доступно по ссылке https://www.youtube.com/watch?v=kJQP7kiw5Fk, значит его id будет kJQP7kiw5Fk

 

Последняя правка от 15 Сентября, 2020