Полноэкранное видео без черных рамок

У меня проблема в том, что видео всегда получает черные полосы по бокам или сверху / снизу в зависимости от размера экрана.

Любая идея, как получить его на весь экран всегда, не показывая, что раздражающие черные полосы? и без использования плагина.

Это моя разметка:

    
        
            
        
    
    #full-bg{
        width: 100%;
        height: 100%;
        img{
            display: none;
        }
        .iframe-box{
            width: 100%;
            height: 100%;
            position: absolute;
            background: url(../img/fittobox.png);
            left: 0 !important;
            top: 0 !important;
            iframe{
                width: 100%;
                height: 100%;
            }
        }
    }
 Alex W07 июн. 2013 г., 14:46
То есть, чтобы видео отображалось с правильным соотношением сторон, которое контролируется программным обеспечением видео (Flash I 'я угадал?), а не JavaScript или CSS.
 SpYk3HH07 июн. 2013 г., 14:39
это зависит от вашего формата VID, и эторазмер с. Вы можете попробовать растянуть его, но тогда ваше видео может выглядеть странно
 meagar07 июн. 2013 г., 14:44
Если соотношение сторон вашего видео нене соответствует соотношению сторон вашего монитора, этодолжен есть черные полосы.

Ответы на вопрос(2)

Если вы знаете соотношение сторон вашего видео, вы не должныМне даже не нужен Javascript. Вы можете использовать в процентах.padding-top

Я мог бы опубликовать код, но ярекомендую прочитатьвся эта статья тем не мение.

Решение Вопроса

Попробуйте добавить в свой CSS

.iframe-box {
    max-width: 1280px; /* video width */
    max-height: 720px; /* video height */
}

Это означает, чтоwidth: 100%; height: 100% позволит элементу расширяться как можно больше, пока не достигнет максимальной высоты или ширины720px или же1280pxсоответственно.

Если на экране выесли его просмотр будет иметь большее разрешение, узел перестанет расширяться, и выне будет черных границ.

Кроме того, afaik следующее не является действительным CSS, вы используете библиотеку или что-то?

#full-bg {
    .iframe-box {
        foo: bar;
    }
}

Редактировать после ответа принято: Я просто подумал о совершенно другом способе достижения этого, но это потребовало бы, чтобы вы изменили много вашего CSS

.fittobox {                /* give fit to box an aspect ratio */
    display: inline-block; /* let it be styled thusly */
    padding: 0;            /* get rid of pre-styling */
    margin: 0;
    width: 100%;           /* take up full width available */
    padding-top: 56.25%;   /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
    height: 0px;           /* don't want it to expand beyond padding */
    position: relative;    /* allow for absolute positioning of child elements */
}

.fittobox > iframe {
    position: absolute;    /* expand to fill */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
 Prashant Pokhriyal26 дек. 2018 г., 09:28
Это'скрытие видео контроллеров
 blnc01 февр. 2017 г., 20:53
Редактировать после обновления работ иcode can be modified easily

Ваш ответ на вопрос