Подгоните контейнер div к размеру видео (также полноэкранный режим)

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

В настоящее время моя проблема заключается в том, чтобы сделать контейнер видео того же размера, что и плеер (а также в полноэкранном режиме).

Мой контейнер расположен относительно, а мой видео- и текстовый оверлей div расположены абсолютно:

HTML:

<div id="container">
        <video id="videoPlayer" controls="true"></video>
        <div id="videoCaption"></div>
</div>

CSS:

#container {
position: relative;
}

#videoPlayer{
position: absolute;
z-index: -1;
}

#videoCaption{
position: absolute;
z-index: 2147483647;
font-size: 80%;
line-height: 125%;
text-align: left;
color: #c9302c;
background-color: #000000;
font-weight: normal;
text-decoration: none;
font-family: "monospaceSansSerif";
}

Вот рабочий пример: https://jsfiddle.net/xw17xbc9/1/

Контейнер не имеет высоты (1904 x 0 пикселей), видеоплеер имеет размер 1280 x 720 пикселей, а мой элемент div videoCaption имеет размер 205 x 16 пикселей (размер, соответствующий тексту), застрял в верхнем левом углу проигрывателя.

Ну, в основном результат, которого я хотел бы достичь, немного похож на наложение всплывающих окон с видео на Youtube.

Любая зацепка приветствуется.

Спасибо


overlay html css video html5-video
person Hetana    schedule 15.04.2015    source источник
comment
опубликуйте рабочий пример, используя jsbin или codepen.   -  person Giacomo Paita    schedule 15.04.2015
comment
Спасибо, отредактировано и рабочий пример с JSFiddle: jsfiddle.net/xw17xbc9   -  person Hetana    schedule 15.04.2015

Ответы (2)


arrow_upward
2
arrow_downward

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

Родительские элементы не будут иметь высоту своих дочерних элементов, если они равны position:absolute. Я сделал элемент видеопроигрывателя position:relative, а затем добавил top:0px; left:0px;, чтобы поместить текстовый контейнер обратно в левый верхний угол контейнера.

Обновить

Новый jsfiddle, показывающий контейнер, принимающий как высоту , так и ширину дочернего видеоэлемента.

person Tim McClure    schedule 15.04.2015
comment
Спасибо за исправление высоты, все работает. Однако ширина берется из окна, а не ширины игрока. - person Hetana; 15.04.2015
comment
@Hetana О, просто добавьте display:inline-block в контейнер div. - person Tim McClure; 15.04.2015
comment
Спасибо, но если вы это сделаете, у вас больше не будет доступа к элементам управления. - person Hetana; 16.04.2015
comment
@Hetana А, это потому, что вы установили z-index: -1 на плеере (я полагаю, чтобы оставить его под текстом). Я удалил эту строку, и теперь управление плеером доступно (а текст остается над видеоплеером). - person Tim McClure; 16.04.2015
comment
@Hetana Кроме того, если вы заинтересованы в создании подобных видео без необходимости создавать проигрыватель самостоятельно, я бы взглянул на WIREWAX. - person Tim McClure; 16.04.2015
comment
В настоящее время я болен, я не могу его протестировать, но просто чтобы вы знали, что я работаю с Dash.js и его проигрывателем. Я подтвержу ответ, как только встану на ноги и протестирую их. - person Hetana; 17.04.2015

arrow_upward
1
arrow_downward

По сути, вы хотите полноэкранное видео, если я правильно понимаю.

Вот полноэкранная демонстрация и вот она действующий код.

Используйте JS для адаптации видео: это будет зависеть от его соотношения и соотношения окон. Ниже фрагмент кода. См. JSBIN, чтобы проверить это:

function(){

        wWidth = $(window).width();
        wHeight = $(window).height();

        if (wWidth / s.ratio < wHeight) { // if new video height < window height (gap underneath)
            pWidth = Math.ceil(wHeight * s.ratio); // get new player width
            $(s.playerId).width(pWidth).height(wHeight).css({left: (wWidth - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
        } else { // new video width < window width (gap to right)
            pHeight = Math.ceil(wWidth / s.ratio); // get new player height
            $(s.playerId).width(wWidth).height(pHeight).css({left: 0, top: (wHeight - pHeight) / 2}); // player height is greater, offset top; reset left
        }
 };

Отредактируйте соотношение видео в настройках функции:

"ratio"         : 16/9
person Giacomo Paita    schedule 15.04.2015
comment
В настоящее время меня больше беспокоит размер контейнера, но это, безусловно, очень поможет позже. Спасибо - person Hetana; 21.04.2015