Как сделать реагировать или регулируемые, Полная ширина, Встроенное видео от Youtube

Если когда-либо вставить a видео из YouTube в некоторых из вашего веб-сайты Возможно, вы заметили, что это видео Фиксированная ширина и это не чутко Когда вы изменяете Размер в браузере или когда вы видите ваши веб-страницы от других устройства с различных размеров экрана (Мобильные, таблетки,…).

В предыдущей статье мы видели как вы могли вставить Youtube видео непосредственно в веб-страницу, и если вы используете WordPress, без любой тип плагин.

Для этого Ширина из видео вставить, из кода HTML что Youtube нас да, Это чутко, Первое, что мы будем делать это поставить этот код внутри DIV.

<div class="contenedor">
   <iframe src="https://www.youtube.com/embed/NUsoVlDFqZg" 
           frameborder="0" 
           allowfullscreen="allowfullscreen" 
           class="video">
   </iframe>
</div>

frameborder="0"

allowfullscreen="allowfullscreen"

class="video">

</iframe>

</div>

Вы можете использовать код показанный здесь, и заменить в маршрут по маршруту, который вы даете YouTube видео, которое вы хотите Вставка. Пожалуйста, обратите внимание, что вы должны присвоить класс видео к элементу IFRAME.

Затем, в вашем файле CSS соответствующий, или непосредственно на элемент СТИЛЬ на той же странице, Мы собираемся Назначьте атрибуты стиля для класса контейнер и видео.

.contenedor {
   position: relative;
   height: 0px;
   width: 100%;   
   padding-bottom: 56.25%;
}

.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.contenedor {

position: relative;

height: 0px;

width: 100%;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

После того, как был введен этот код, Если Обновить Опять же странице, где вы вставили видео, проверить Теперь это регулирует для Ширина из DIV Он содержит. Да Восток DIV расположен прямо над ТЕЛО, Вы увидите что оно Сброс для ширина экрана.