Заполнение колонтитула бутстрапов с отзывчивым видео

У меня есть сетка веб-сайта, над которой я работаю, которая показывает новые объявления и сообщения в блогах. У меня есть одна большая колонка (col-sm-8, которая охватывает 2/3 страницы), что я хочу иметь вводное видео (объяснение/демонстрация работы).Заполнение колонтитула бутстрапов с отзывчивым видео

Я не могу показаться, чтобы получить видео, чтобы играть хорошо в качестве фона для этого (пытается с YouTube встраивает и пару учебников по всему Интернету) Я создал образ, чтобы объяснить это лучше ниже:

Любой помочь, или просто толчок в правильном направлении, будет очень оценен!

Благодаря

обновленный образ для лучшего масштаба:

источник

2017-01-07 CGKeaton

Вы пробовали что-нибудь еще? Где ваш код? – mlegg

Эй, mlegg, я пробовал несколько вещей, я просто вообще не могу получить полное заполняющее видео, которое покрывает всю площадь столбца. Реактивность видео, кажется, работает (даже если вы вставляете в нее тюбики, но он никогда не заполняется). Я отправлю старый макет, который у меня есть для вас здесь через 1 секунду. Спасибо за ответ. – CGKeaton

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

источник

2017-01-07 17:34:10

Эй, @Oily Barrett - Звучит правильно, посмотрите мой обновленный снимок. – CGKeaton

Хорошо, вы, вероятно, не должны использовать встраивание youtube, чтобы наилучшим образом использовать тег html для видео и стиль его, чтобы он соответствовал области, но вам нужно видео, хранящееся локально, или где-то вы можете напрямую ссылаться на него. –

Вот отзывчивый код встраивания YouTube. Ширина и высота были даны youtube. Вам нужно придумать остальную часть того, как вы хотите, чтобы ваша страница была.

/* Flexible iFrame */ 
 
    
 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
    
 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/FSvNhxKJJyU" frameborder="0" allowfullscreen></iframe> 
 
</div>

источник

2017-01-07 22:14:55 mlegg

Заполнение колонтитула бутстрапов с отзывчивым видео

ответ

Смежные вопросы