Правильное встраивание видео Youtube в загрузочную страницу 3.0

Мне нужно встроить видео YouTube в мой отзывчивый сайт, но он не масштабируется правильно, особенно на мобильных устройствах. Он отлично выглядит на настольных компьютерах и планшетах, но как только вы окажетесь ниже ширины окна просмотра 600, видео разбивает контейнер. Чтобы просмотреть все видео на мобильном телефоне, вам нужно ущипнуть его до такой степени, что остальная часть содержимого заполняет примерно 1/2 экрана по вертикали. Не так хорошо, как хотелось бы.

Я хочу, чтобы текстовое содержимое было на 1/3 ширины, а видео должно быть 2/3 ширины на рабочем столе и планшетах и укладываться на мобильном устройстве с видео и содержанием как на 100% ширины окна просмотра. Я попытался использовать width = "100%" в iframe, но затем высота не масштабируется правильно, так как вы изменяете размер и видео растягивается или сжимается.

Мне также нужно сделать это с помощью CSS только потому, что я просто кладу свои таблицы стилей над бутстрапом 3.0.

Здесь мой код:

 <div class="container">            
            <div class="row">
                <div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it just blankish content provided so that it fills up some space, pretty boring huh?</div>
                <div class="col-sm-8">
                   <iframe width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
                </div>
 </div>

Ответ 1

Существует собственное решение Bootstrap3: http://getbootstrap.com/components/#responsive-embed

так как Bootstrap 3.2.0!

Если вы используете Bootstrap < v3.2.0, посмотрите в файл "responsive-embed.less" v3.2.0 - возможно, вы можете использовать/копировать этот код в своем случае (он работает для меня в версии 3.1.1).

Ответ 2

Я знаю это поздно, у меня такая же проблема со старой пользовательской темой, просто добавленной в boostrap.css:

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

И для видео:

<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>

Ответ 3

Это также зависит от того, как вы создаете свой сайт с помощью бутстрапа. В моем примере я использую col-md-12 для своего видео div и добавляю класс col-sm-12 для iframe, поэтому при изменении размера на меньший экран видео не будет отображаться сжатым. Я добавляю также высоту в iframe:

<div class="col-md-12">
<iframe class="col-sm-12" height="333" frameborder="0" wmode="Opaque" allowfullscreen="" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent">
</div>

Ответ 4

Подумайте об обертывании видео в то, что вы можете сделать гибким через bootsrap.

Бутстрап - не волшебный инструмент, а просто механизм компоновки. Вы почти имеете его в своем примере.

Просто используйте сетку, предоставленную бутстрапом, и удалите строгий размер в iframe. Используйте направляющие класса bootstrap для сетки.

Например:

<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">

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

A Fiddel тоже: http://jsfiddle.net/RsSAT/

Ответ 5

Я также использую bootstrap 3.x, и следующий код fore responsive youtube для встраивания видео работает как прелесть для меня:

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

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

Ответ 6

Ну, это простое и простое решение. Вы можете сделать ваше видео легко подходящим для любого устройства и размера экрана. Вот код HTML и CSS:

.yt-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.yt-container iframe, .yt-container object, .yt-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

<div class="yt-container">
   <iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>

Ответ 7

Это отлично работает для меня...

   .delimitador{
        width:100%;
        margin:auto;
    }
    .contenedor{
        height:0px;
        width:100%;
        /*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */
        padding-top:56.25%; /* Relación: 16/9 = 56.25% */
        position:relative;
    }

    iframe{
            position:absolute;
            height:100%;
            width:100%;
            top:0px;
            left:0px;
    }

а затем

<div class="delimitador">
<div class="contenedor">
// youtube code 
</div>
</div>