Как реализовать адаптивную вставку iframe на YouTube с помощью Twitter Bootstrap?
Оставляя здесь быструю альтернативу, используя переключатель класса на столе. Поведение очень похоже на выбор, но может быть в стиле с переходами, фильтрами и цветами, каждый из которых индивидуально.
function toggleSelect(){
if (store.classList[0] === "hidden"){
store.classList = "viewfull"
}
else {
store.classList = "hidden"
}
}#store {
overflow-y: scroll;
max-height: 110px;
max-width: 50%
}
.hidden {
display: none
}
.viewfull {
display: block
}
#store :nth-child(4) {
background-color: lime;
}
span {font-size:2rem;cursor:pointer}<span onclick="toggleSelect()">⮋</span>
<div id="store" class="hidden">
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
</div>6 ответов
Попробуйте этот «Отзывчивый видео CSS», он идеально подходит для меня: https://gist.github.com/2302238
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
Я реализовал чистое CSS-решение, которое прекрасно работает.
Вот пример кода, на мой взгляд, с использованием кода iframe, сгенерированного в YouTube.
<div class="video-container">
<iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
Вот пример кода в другом представлении, где вместо использования iframe я использовал поле body, сгенерированное из гема AutoHtml, который используется для встраивания различных типов видео ссылок в веб-страницу. Это хорошо, если у вас есть модель, в которой ссылка должна быть динамически встроена в одну и ту же веб-страницу.
<div class="video-container">
<span style="text-align: center;"><%= @livevideo.body_html %></span>
</div>
Вот код CSS:
.video-container {
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Вот видео на YouTube, которое подробно объясняет, как работает код, и дает один или два сообщения в блоге для проверки.
Bootstrap 3.2.0 содержит несколько улучшений и большое количество исправлений ошибок. В структуре для создания сайтов с адаптивным дизайном в Bootstrap отсутствовала поддержка адаптивных элементов и элементов, добавленных в этой последней версии.
HTML-код для адаптивного видео YouTube 16: 9, который регулирует свой размер в зависимости от ширины страницы, на которой он отображается, выглядит следующим образом:
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
Это, вероятно, лучше всего сделать с помощью jQuery: http://www.seanmccambridge.com/tubular/ или http://okfoc.us/okvideo/
Просто чтобы автоматизировать @ ответ Барта , я создал простой фрагмент Javascript, который автоматически оборачивает iframe элементы в <div class="flex-video">
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});
При использовании начальной загрузки приведенный ниже метод, без сомнения, является самым простым способом реализации адаптивного встраивания:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Документацию можно найти здесь: http://getbootstrap.com/components /#responsive-embed.