HTML/CSS

Адаптивные блоки YouTube

Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать width="100%", то он растянется на всю ширину родителя, но для высоты hight="100%" не работает. Это ведет к тому что на мобильных блок слишком высокий с черными отступами.

Далее приведено несколько примеров как это исправить, а также вывести несколько блоков в одну линию.

1

Автоматическая высота видео

<div class="video">
    <div class="video-wrp">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
    </div>
</div>
.video {  
    margin-bottom: 20px;
}
.video-wrp {
    position: relative;
    padding-top: 56.25%;
}
.video-wrp iframe {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    border: none;
}
2

Видео по центру с максимальной шириной

Если сайт «резиновый», то лучше задать максимальную ширину видео в 800-1000px и отценровать, чтобы оно не было слишком большим. В примере максимальная ширина 600px.

.video {  
    max-width: 600px;
    margin: 0 auto 20px;
}
.video-wrp {
    position: relative;
    padding-top: 56.25%;
}
.video-wrp iframe {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    border: none;
}
3

Два видео в ряд

<div class="video_2">
    <div class="video_2-row">
        <div class="video_2-col">
            <div class="video_2-wrp">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
            </div>
        </div>
        <div class="video_2-col">
            <div class="video_2-wrp">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/E6TUs69Cw94"></iframe>
            </div>
        </div>
    </div>
</div>
.video_2 {  
    overflow: hidden;
}
.video_2-row {  
    margin: 0 -10px 0 -10px;
}
.video_2-col {
    float: left;
    width: 50%;
    margin-bottom: 20px;
}
.video_2-wrp {
    position: relative;
    padding-top: 56.25%;
    margin: 0 10px 0 10px;
    box-sizing: border-box;
}
.video_2-wrp iframe {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    border: none;
}

При ширине окна <= 800px вывод в одну колонку:

@media screen and (max-width:800px){
    .video-col {
        width: 100%;
    }
}
4

Три видео в ряд

<div class="video_3">
    <div class="video_3-row">
        <div class="video_3-col">
            <div class="video_3-wrp">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/7Ing1lOzmGA"></iframe>
            </div>
        </div>
        <div class="video_3-col">
            <div class="video_3-wrp">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/E6TUs69Cw94"></iframe>
            </div>
        </div>
        <div class="video_3-col">
            <div class="video_3-wrp">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/qJRfbzfYzEc"></iframe>
            </div>
        </div>
    </div>
</div>
.video_3 {  
    overflow: hidden;
}
.video_3-row {  
    margin: 0 -10px 0 -10px;
}
.video_3-col {
    float: left;
    width: 33.3%;
    margin-bottom: 20px;
}
.video_3-wrp {
    position: relative;
    padding-top: 56.25%;
    margin: 0 10px 0 10px;
    box-sizing: border-box;
}
.video_3-wrp iframe {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    border: none;
}

При ширине от 1200px вывод в две колонки, от 800px – в одну:

@media screen and (max-width:1200px){
    .video_3-col {
        width: 50%;
    }
}
@media screen and (max-width:800px){
    .video_3-col {
        width: 100%;
    }
}
09 февраля 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.