Как вставить видео через iframe без полос?

Question

[uRoot]

Видео вставлено через iframe из vimeo, которое обернутое в div, а div-у указан цвет бэкграунда. Мне при клике не на видео необходимо скрыть этот div вместе с видео.

Но когда я меняю размер окна, видео уменьшается, создавая черные полосы в iframe-е . Как сделать так, чтобы этих черных полос не было, чтобы я мог повесить обработчик на div?

Скрин

Песочница: https://jsfiddle.net/b4zctgpL/

Answer 1

[Rustam Bainazarov]

Вот так нужно вам? Хак соотношения сторон. У вас тупо соотношение сторон не соблюдается, оттуда и полосы сверху (пустое пространство). Решение на CSS только такое есть.



Встраивается в разметку это дело довольно просто:


Можно что-то типа такого сделать, если заняться нечем, главное -- не управлять высотой родительского блока iframe'а, у которого этот хак используется :))

Answer 2

[Сергей delphinpro]

Это не отступы "внутри iframe" =))
Это те же самые полоски, что бывают и на телеке при несовпадении формата экрана телевизора и формата кадра транслируемого видео.

Соответственно, если вы знаете формат кадра, то можно сделать так:

Answer 3

[Alfieros]

1) Зачем для видео вы используете <iframe>, если есть <video> ?
2) Не вижу никаких чёрных полос, кроме белых бордюров. У вас весь сайт чёрный)
3) Дайте ссылку на сайт что ли, для более детального изучения вашего вопроса.

Comments

[uRoot]

Обновил пост. Добавил песочницу. Все что от видео и до бордера - отступы создаваемые внутри ifram-а для позиционирования видео. Их я хочу убрать.

1) Считайте, что в макете так :)

[Alfieros]

С вашим видео такого не выйдет. Так как на стороне vimeo подгружаются стили в зависимости от размера экрана. Скачайте видео и загрузите себе на хост.

[uRoot]

Alfieros, а как же iframe?

Необходимо вставить видео такого вида:
https://player.vimeo.com/video/44309170?autoplay=1...
Видите. Тут передаются ещё параметры для воспроизведения.