Удаление черных рамок на встроенном фрейме 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.

Обычно мы добавляем почтовые ящики или колонны вокруг видеофреймов, чтобы сохранить высоту и ширину в определенном соотношении для представления. Но в этом случае черные границы будут такими же простыми, как фон CSS.

Чтобы все реагировало, вы должны установить высоту, равную нулю (как у вас), и использовать хак с отступами, чтобы сохранить соотношение сторон видео (в данном случае видео 16:9; 9/16 * 100 = 56,25%.). Этим числом будет либо ваше верхнее, либо нижнее значение. Поскольку заполнение измеряется в процентах, это масштабирует заполнение по отношению к ширине, сохраняя правильное соотношение, независимо от ширины видео.

В вашем случае это видео на самом деле имеет почтовый ящик в реальном видео, которое вы можете видеть из источника тега видео в iframe. Я не уверен, почему у вас есть padding-top:30 но это делает черные границы еще больше. Вам нужно будет еще больше взломать вашу ситуацию из-за встроенного почтового ящика. Я собрал здесь демонстрацию jsfiddle, которая включает несколько комментариев, но использует JS для достижения того, что вы ищете.

Концепция кода заключается в следующем:

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

Лично мне не нравится делать дорогостоящие операции DOM с изменением размера, возможно, поэтому вы и просили только CSS, но у вас есть демоверсия.

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

Источник

Отрежьте 1 пиксель от всех краев с помощью 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;
}

Вы найдете более подробную информацию здесь

Источник

Проще говоря frameborder="0" как один из ваших атрибутов.

Источник

У меня была такая же проблема, и проблему было просто решить. Мои видео были встроены в страницы и посты Wordpress с помощью oEmbed. Wordpress оборачивал мои встроенные видео в <p> теги <p> у тегов был некоторый запас, который вызывал черные границы сверху и снизу моих видео. Я использовал следующий бит jQuery, чтобы удалить <p> теги из моих встроенных видео:

$('.embed-container iframe').unwrap();
Источник

Я создал решение этой проблемы, используя часть этого поста на 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, чтобы высота ="100%".

Таким образом, вы можете добавить высоту к фрейму или сделать это в CSS. Чтобы контролировать высоту с помощью css, я сохранил базовую высоту в iframe на 100%, и любые корректировки этой базовой высоты выполняются с помощью css.

Источник

Я только что решил это -

Контейнер видео был построен с контейнером видео-титров DIV, который был черной прозрачной полосой.

Источник

Я решил эту проблему, удалив padding-top в .embed-container

прокладка снизу: 56,25%; установит соотношение экрана к 16:9 и уберет черную полосу сверху и снизу. верхняя часть отступа добавит дополнительную черную полосу назад.

Источник
Другие вопросы по тегам