2017-04-02 1 views
4

나는 내장 된 YouTube 비디오가있는 반응 형 웹 사이트를 구축 중입니다. 동영상은 반응 형 iframe에 포함되어 있으며 Firefox를 제외한 모든 브라우저에서 완벽하게 작동합니다. 거기에 단순히 나타나지 않습니다.Firefox에서 반응 형 iframe의 YouTube 동영상이 보이지 않습니다.

나는 모든 js와 js- 쿼리를 주석 처리하여 링크에 html5를 추가하여 savemode를 시도했습니다. px로 너비와 높이를 추가하면 잘 나타나고 작동하지만 응답이 없습니다.

컨테이너의 높이를 백분율 또는 vw 값으로 변경하여 표시 할 수 있습니다. 어떤 그림을 추가하든 관계없이 항상 비디오를 두 배 높이로 만들고 왼쪽과 오른쪽의 큰 부분을 잘라냅니다. 또한 뷰포트가 축소 될 때 너비를 더 잘게됩니다. 컨테이너 값을 0 이외의 값으로 변경하면 다른 모든 브라우저에서도 마찬가지입니다.

시도한 방화범이 끌 렸지만, iframe이 보이지 않습니다.

.embed-container { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; 
 
\t height: 0; 
 
\t overflow: hidden; 
 
\t max-width: 100%; 
 
\t margin-bottom: 4vw; 
 
} 
 
\t 
 
.embed-container iframe, .embed-container object, .embed-container embed { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}
<div class="embed-container"> 
 
    <iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe> 
 
</div>

웹 URL : https://www.marjanderksen.com

답변

0

당신이 FitVids.js을 사용하려고 적이 여기

코드인가? https://github.com/davatron5000/FitVids.js

:

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.fitvids.js"></script> 
<script> 
    $(document).ready(function(){ 
     $(".embed-container").fitVids(); 
    }); 
</script> 

링크 플러그인을 다운로드

관련 문제