Удаление черных границ на встраивании iframe vimeo с помощью CSS?
Я пытаюсь найти способ, чтобы скрыть черные полосы в верхней и нижней части видео Vimeo. Я думал, что может быть способ скрыть их с помощью CSS.
Я в основном хотел достичь того, что этот человек хотел достичь с изображением в ссылке ниже, за исключением того, что я хочу сделать это со встроенным видео, сохраняя его репрессивным.
удаление черных границ 4: 3 на миниатюрах youtube
большое спасибо.
HTML-код
<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
в CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
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%;
}
7 ответов
в любом случае, я не думаю, что вы сможете использовать только CSS.
обычно мы добавляем letterboxing или pillar boxing вокруг видео iframes, чтобы сохранить высоту и ширину в определенном соотношении для презентации. Но в этом случае черные границы будут такими же простыми, как фон css.
чтобы держать вещи отзывчивыми, вы бы установить высоту на что-то вроде нуля (как у вас есть) и использовать Хак заполнения, чтобы сохранить соотношение сторон видео (в этом случае 16:9 видео; 9/16 * 100 = 56.25%). Это число будет либо вашим верхним, либо нижним значением заполнения. Поскольку заполнение измеряется процентами, это масштабирует заполнение по отношению к ширине, сохраняя правильное соотношение независимо от того, какую ширину вы Размер видео.
в вашем случае это видео на самом деле имеет letterboxing в фактическом видео, которое вы можете видеть из источника тега видео в iframe. Я не уверен, почему у вас есть padding-top:30 но это делает черные границы еще больше. Вам нужно будет взломать вашу ситуацию еще больше, хотя из-за встроенного letterboxing. Я собрал jsfiddle демо здесь который включает в себя несколько комментариев, но он использует JS для достижения того, что вы ищете.
концепция кода выглядит следующим образом:
- вы хотите, чтобы внешний контейнер обрезать снизу и сверху видео. Предполагая, что вы хотите, чтобы видео было отзывчивым и обрезанным, вам всегда нужно иметь фактическое видео будет больше, чем внешний контейнер, который его маскирует.
- видео должно быть перемещено вверх по отношению к тому, насколько широко видео против толщины верхней границы
- вы захотите немного уменьшить высоту внешнего контейнера, чтобы компенсировать отрицательный верхний край, но все же скрыть нижнюю часть видео
лично мне не нравится делать дорогостоящие операции DOM по изменению размера, что, возможно, является причиной того, что вы попросили исключительно css, но FWIW, у тебя есть демо.
В идеале ваш лучший вариант будет получить видео повторно записано без letterboxing, так что все, что вам нужно, это заполнение Хак.
отрежьте 1px от всех ребер с помощью CSS:
.embed-container {
position: relative;
padding-bottom: 43%; /* Aspect ratio of the video */
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
HTML-код:
<div class="js-video [vimeo, widescreen]">
[video html goes here]
</div>
CSS:
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
вы найдете более подробную информацию здесь
у меня была такая же проблема, и проблема была проста в решении. Мои видео были встроены в страницы и сообщения Wordpress с помощью oEmbed. Wordpress упаковывал мои встроенные видео в <p> теги <p> теги имели некоторый запас, который вызывал черные границы вверху и внизу моих видео. Я использовал следующий бит jQuery для удаления <p> теги из моих встроенных видео:
$('.embed-container iframe').unwrap();
Я решил эту проблему путем удаления padding-top на .embed-container
padding-bottom: 56.25%; установит соотношение экрана к 16: 9 и удалите черную полосу сверху и снизу. обивка сверху здесь добавит дополнительную черную полосу назад.
Я создал решение для этой точной проблемы, используя часть этого сообщения github. Удаление Черных Полос. Он не меняет цвет фона vimeo, а просто скрывает его от окна просмотра.
https://github.com/davatron5000/FitVids.js/issues/130
#myid {
height: 112.6%;
}
однако, если вы добавите ширину с помощью CSS " vw " (ширина видового экрана), она будет последовательно отображаться на любом мониторе/устройстве без отображения черного фона. Я добавил поле, чтобы iframe будет оставайтесь в центре div, как только ширина станет короче.
#myvimeoiframeID {
height: 112%;
width: 80vw;
margin: 0 15% auto;
}
в моем родительском контейнере, который содержит видео, я добавил:
.embed-container {
padding-bottom: 40.25%;
}
это, кажется, убедитесь, что видео показывает в div. Когда я удалил этот раздел видео исчезает, но вы все еще можете здесь играть. Таким образом, есть что-то довольно удивительное с заполнением снизу: 40.25%;
Я изменил код встроенного iframe vimeo на height= " 100%".
Так вы можете добавить высоту в iframe или вы можете сделать это в css. Чтобы контролировать высоту css, я сохранил базовую высоту в iframe на 100%, и любые настройки этой базовой высоты через css.