유튜브 : 임베디드 비디오 압축

Question

저는 iFrame API를 통해 유튜브 비디오를 내장하고 있습니다. 동영상 자체는 정사각형 모양이며 너비와 높이가 컨테이너 크기에 따라 다릅니다 (유체 치수가있는 정사각형). -이를 위해 CSS를 사용하고 있습니다.

모든 것은 다소 괜찮 작동하지만, 시작과 (시작하기 전에 및 중지 후) 비디오의 끝에서, 콘텐츠는, 감소 폭 공개 블랙 사이드 바 표시됩니다

을

왜 이런 일이 발생하거나 그에 대해 어떻게해야할까요? 응답 성있는 레이아웃의 맥락에서 누군가가 불규칙한 모양의 작업으로 비디오를 만들었습니까?

---

업데이트

이 101 %로 너비와 높이를 설정하는 데 도움이 보인다. 아직 얼마나 일관되게, 그래도.

Answer 1

<div class="video_iframe_wr"> 
    <iframe/> 
</div> 


    .video_iframe_wr { 
    height: 0; 
    padding-bottom: 100%; /* that makes height = width */ 
    position: relative; 
} 

.video_iframe_wr > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width:100%; 
    height:100%; 
}