полноэкранный адаптивный видеоплеер

В настоящее время я работаю над сайтом, который показывает полноэкранное видео с помощью API проигрывателя vimeo. Проблема в том, что в зависимости от размеров окна браузера я получаю черные полосы, явно из-за несоответствия между соотношением сторон окна и видео.

Я пробовал довольно много комбинаций css и js, включая, помимо прочего, обычное решение для адаптивных видео, fitvids, но все безрезультатно.

тогда мой вопрос: возможно ли полноэкранное отзывчивое видео со встроенным проигрывателем vimeo или лучше отказаться от него и создать собственный проигрыватель самостоятельно, используя vimeo только для размещения видеофайлов?

если это поможет, вот соответствующий код:

HTML

<div id="video”>
    <div id="video-container">
        <iframe id="main-video" src="//player.vimeo.com/video/123456789?portrait=0&title=0&badge=0&byline=0&autoplay=1&color=333&api=1&player_id=main-video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

CSS

#video {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#video-container {
    position: fixed; 
    min-width: 100%; 
    min-height: 100%;
}


#main-video {
     position: fixed; 
     min-width: 100%; 
     min-height: 100%;
}

заранее спасибо!


person gui machiavelli    schedule 14.12.2013    source источник


Ответы (1)


Я не думаю, что вы можете сделать это только с помощью CSS (object-fit вероятно, будет работать, когда он будет реализован в других браузерах). Я даже не уверен, что это будет работать с нашим iframe.

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

person Brad Dougherty    schedule 18.03.2014
comment
ой, совсем забыл ответить! в конце концов от этой идеи отказались, так что у меня не было возможности попробовать решить проблему на самом деле. - person gui machiavelli; 25.06.2014