Я пытаюсь показать видеоизображение vimeo в полноэкранном режиме на веб-странице.
Вот как это выглядит сейчас:
Как вы видите, черный - это полная ширина, но не видео. Он должен быть полной ширины, никаких элементов управления не показаны, играть автоматически и играть в петле.
Мой код выглядит следующим образом:
<iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Клиент имеет vimeo plus, но не vimeo pro. Может ли кто-нибудь помочь мне с этим.
UPDATE:
Я изменил свой код на это:
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0; overflow: hidden;
max-width: 100%; height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
Но у меня все еще есть черная рамка внизу и сверху.
Я создал jsfiddle, где вы также можете увидеть это: https://jsfiddle.net/07fkfwz3/. И видео, которое вы видите здесь, не имеет границ.