Youtube 비디오를 부트 스트랩 3.0 페이지에 올바르게 포함

Youtube 비디오를 부트 스트랩 3.0 페이지에 올바르게 포함

---

반응 형 사이트에 YouTube 동영상을 삽입해야하는데 특히 모바일에서 제대로 확장되지 않습니다. 데스크톱과 태블릿에서는 괜찮아 보이지만 뷰포트 너비가 600 미만이면 동영상이 컨테이너를 깨뜨립니다. 모바일에서 전체 비디오를 보려면 나머지 콘텐츠가 화면의 약 1/2 만 세로로 채우도록 핀치해야합니다. 별로 좋지 않습니다.

텍스트 콘텐츠의 너비는 1/3이고 동영상은 데스크톱과 태블릿에서는 2/3 너비로, 동영상과 콘텐츠는 모두 뷰포트 너비의 100 %로 모바일에 쌓이기를 원합니다. iframe에서 width = "100 %"를 사용해 보았지만 크기를 조정할 때 높이가 올바르게 조정되지 않고 비디오가 늘어나거나 찌그러집니다.

또한 단순히 스톡 부트 스트랩 3.0 위에 스타일 시트를 배치하기 때문에 CSS로만 수행해야합니다.

내 코드는 다음과 같습니다.

 <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's 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>

---

Bootstrap3 기본 솔루션이 있습니다 : http://getbootstrap.com/components/#responsive-embed

부트 스트랩 3.2.0부터!

부트 스트랩 <v3.2.0을 사용하는 경우 v3.2.0의 "responsive-embed.less"파일을 살펴보십시오.이 코드를 귀하의 경우에 사용 / 복사 할 수 있습니다 (v3.1.1에서 작동 함).

---

나는 그것이 늦었다는 것을 알고 있으며, 단지 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>

---

부 트랩을 통해 유연하게 만들 수있는 내용에 비디오를 포장하는 것에 대해 생각해보십시오.

부트 스트랩은 마술 도구가 아니라 레이아웃 엔진 일뿐입니다. 당신은 거의 당신의 예에서 그것을 가지고 있습니다.

부트 스트랩에서 제공하는 그리드를 사용하고 iframe에서 엄격한 크기 조정을 제거하십시오. 그리드에 대한 부트 스트랩 클래스 가이드를 사용하세요.

예를 들면 :

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

해상도가 주어지면 iframe의 클래스가 어떻게 변경되는지 볼 수 있습니다.

Fiddel도 : http://jsfiddle.net/RsSAT/

---

또한 부트 스트랩으로 사이트 스타일을 지정하는 방법에 따라 다릅니다. 내 예에서는 비디오 div에 col-md-12를 사용하고 iframe에 col-sm-12 클래스를 추가하므로 작은 화면으로 크기를 조정할 때 비디오가 압착되지 않습니다. 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>

---

간단하고 쉬운 해결책이 있습니다. 모든 장치 및 화면 크기에 맞게 비디오를 쉽게 만들 수 있습니다. 다음은 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>

출처 : https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/

---

I use bootstrap 3.x as well and the following code fore responsive youtube video embedding works like charm for me:

.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>

I gave a similiar answer on another thread (Shrink a YouTube video to responsive width), but I guess my answers can help here as well.

---

This works fine for me...

   .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;
    }

and then

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

참고URL : https://stackoverflow.com/questions/20888375/properly-embedding-youtube-video-into-bootstrap-3-0-page