퍼간 YouTube 동영상 레이아웃 문제

this page에 '유사한 축제'라는 회전 목마의 왼쪽에 삽입 된 YouTube 동영상이 표시됩니다. YouTube 동영상을 삽입하는 데 사용되는 HTML은 다음과 같습니다퍼간 YouTube 동영상 레이아웃 문제

는

유튜브 섹션의 HTML은 다음과 같습니다

<div class="span4 spacer youtube"> 
    <div class="title clearfix"> 
     <h2 class="pull-left">YouTube</h2> 
    </div> 
    <iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe> 
</div>

(대답하는 부트 스트랩 그리드를 사용) 페이지의 레이아웃이 비디오가 동일해야한다는 등이다 높이는 오른쪽에있는 회전 목마와 같습니다.하지만 보시다시피, 부모 컨테이너에서 어딘가에서 벗어납니다. 동영상을 회전식 슬라이드와 오른쪽으로 정렬하려면 어떻게해야합니까?

내가 언급 한 내용에 대한 의문이 생길 경우를 대비 한 스크린 샷입니다.

enter image description here

출처

2012-12-16 Dónal

내 생각 엔 Youtube의 embed 스크립트를 사용하고 있으며,'.row'에 대한 CSS 렌더링이 완료된 후 플레이어 객체를 포함하기 때문에 스크립트가 레이아웃을 깨뜨리고있는 것 같습니다. 페이지를 검사해도 실제 코드가 제공되지 않습니다. YouTube의 표준 소스 코드를 사용하고 있습니까? –

@adityamenon "귀하의 페이지를 검사하면 실제 코드가 나옵니다"라는 것은 무엇을 의미합니까? 페이지의 소스를 보면 실제 코드가 있습니다. –

아, 예, 자동차를 사용하고 걷는 법을 잊어 버리는 경우입니다. 죄송합니다. 개발자 도구 만 사용하고있었습니다. –

나는 row-fluid 컨테이너가 동적으로 유튜브 비디오에 33 %의 폭을 추가하는 것으로 나타났습니다. 그래서 당신이 설정 한 너비 기대는 그 클래스에 의해 재설정됩니다.

이 시도 :

는

<div class="row-fluid"> 


    <div class="span4 spacer twitter"> 
    </div> 


    <!-- Youtube --> 
    <div class="span4 spacer youtube"> 
     <div class="title clearfix"> 
      <h2 class="pull-left">YouTube</h2> 
     </div> 
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>   
    </div> 

    <!-- Similar Carousel --> 
    <div class="span4 spacer"> 

     <div id="similarCarousel" class="carousel slide last"> 
     </div> 
    </div> 

</div>

(씨 외국인에 모자 팁)

그것은 단지 iframe이 높이를 설정합니다. 전체 행 유체 용기가 다소 팽창하고 높이가 불규칙합니다. 그러나 '점프 아웃 컨테이너'문제는 없습니다.

출처

2012-12-16 14:48:43

대신

<iframe id="fitvid811516" 
    src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm"> 
</iframe>

사용이

<iframe width="640" height="360" 
    src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage" 
frameborder="0" allowfullscreen> 
</iframe>

의

그리고 수동으로 폭 조절 및 높이입니다. iframe은 동적 크기 조정을 제대로 수행하지 않습니다. 당신이 레이아웃을 깨고 싶지 않아뿐만 아니라 내에서 내용을 변경하지 않으려는 경우 또한

, 당신은 또한 HTML의 부모 컨테이너로 이동이 있음을 overflow: hidden

.fluid-width-video-wrapper { 
    overflow:hidden; 
}

주를 설정할 수 있습니다 레이아웃을 수정하지만 iframe을 깨뜨릴 수 있습니다. 재생 컨트롤이 유지되는 밑 부분이 숨겨집니다.

출처

2012-12-16 15:02:44

퍼간 YouTube 동영상 레이아웃 문제

답변

관련 문제