При вставке URL-адреса Vimeo видео встраивается с избыточными белыми полями сверху и снизу на мобильных устройствах.
Чтобы воспроизвести проблему, проверьте эти URL-адреса на мобильном устройстве:
https://try.discourse.org/t/testing-video-embeds/1369
Скриншоты:
Итак, что происходит здесь: наш тег iframe имеет статическую ширину и высоту, а встроенное видео Vimeo меняет размер до 100% ширины и имеет автоматическую высоту.
Это также происходит с другими видео, встроенными в oneboxes, как только вы начинаете воспроизведение, но они учитывают изменение размера, поэтому используют всё пространство контейнера и задают чёрный фон.
Вот пример с Dailymotion:
Думаю, самое простое, что мы можем сделать в данном случае, — задать чёрный фон для iframe Vimeo? Это будет выглядеть так:
Нам нужна статическая высота, иначе макет будет «дёргаться» во время загрузки страницы… Не уверен, можем ли мы или должны ли делать что-то более сложное, например определять соотношение сторон и подстраивать размеры для экранов меньшего размера (@techAPJ )?
Да, пока остановимся на чёрном фоне.
То же самое произошло с Streamable.
