Как добавить адаптивный блок с видео роликом с ютуба

Здравствуйте. Вебом начал заниматься недавно, опыта пока мало. Сейчас администратирую сайт, базирующийся на онлайн продажах. Хочу добавить к позициям видео с ютуба обзора. Нашёл маленькую статью как это сделать.

Как я понял - 

В html надо добавить

<div class="thumb-wrap">  <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe> </div>


В css 

.thumb-wrap {  
position: relative;  
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */  height: 0;  
overflow: hidden;
 } .thumb-wrap iframe {  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0; 
}

Как мне все сделать грамотно?

1 ответ

  • 1

    Делаете копию темы дизайна, создаете новое скрытое поселение магазина и назначаете эту копию темы. В ней тренируетесь. Проверяете на скрытом поселении. В идеале - локальная копия сайта на рабочей машинке и в ней делаете что хотите. Это и быстрее для разработки и безопаснее. Перепутать шаблоны основной темы и копии во встроенном редакторе - как нефиг делать -). Потом изменения переносите на сайт. Экспериментировать на живом магазине явно не стоит.

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

Чтобы добавить комментарий, зарегистрируйтесь или войдите