Адаптивное видео youtube на сайте

Адаптивность является незаменимым свойством каждого современного сайта. Помимо элементов шаблона сайта, адаптивностью должен обладать еще и размещаемый в нем видеоконтент из популярного видеохостинга youtube. Проблема заключается в том, что при генерации кода видео из youtube используются фиксированные параметры размера в пикселях.

Чтобы придать видеоконтенту из youtube адаптивность, сгенерированный код нужно обернуть  div блоком и назначить ему необходимые CSS стили.

HTML код

/* Вставляем код видео, сгенерированный через youtube */

CSS код

.video-container {
    position: relative;
    padding-bottom: 56.25%; height: 0; overflow: hidden;
    margin-bottom: 10px;
    margin-top: 10px;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}