내 내장 비디오가 응답하지 않는 이유는 무엇입니까?

Question

YouTube에서 동영상을 퍼가려면이 스크립트가 있습니다. 동영상이 잘 재생되지만 동영상 응답 속도를 높이기 위해 너비를 %로 설정할 수 없습니다. 어떻게 할 수 있습니까?

<div class="video-container" id="VideoPlayer"></div> 

<script async src="https://www.youtube.com/iframe_api"></script> 
    <script> 
       function onYouTubeIframeAPIReady() { 
        var player; 
        player = new YT.Player('VideoPlayer', { 
        videoId: 'yusGUGTVAyw', // YouTube Video ID 
        width: 560,    // Player width (in px) 
        height: 400,    // Player height (in px) 
        playerVars: { 
         autoplay: 1,  // Auto-play the video on load 
         controls: 1,  // Show pause/play buttons in player 
         showinfo: 0,  // Hide the video title 
         modestbranding: 1, // Hide the Youtube Logo 
         loop: 5,   // Run the video in a loop 
         fs: 0,    // Hide the full screen button 
         cc_load_policy: 0, // Hide closed captions 
         iv_load_policy: 3, // Hide the Video Annotations 
         autohide: 0   // Hide video controls when playing 
        }, 
        events: { 
         onReady: function(e) { 
         e.target.mute(); 
         } 
        } 
        }); 
       } 

    </script> 

이 CSS :

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

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

그러나이 비디오는 응답되지 않습니다. CSS가 효과가없는 것 같아. 내가 뭘 잘못하고있는거야?

Answer 1

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

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

<div class="video-container"> 
 
<div class="" id="VideoPlayer"></div> 
 
</div> 
 
<script async src="https://www.youtube.com/iframe_api"></script> 
 
    <script> 
 
       function onYouTubeIframeAPIReady() { 
 
        var player; 
 
        player = new YT.Player('VideoPlayer', { 
 
        videoId: 'yusGUGTVAyw', // YouTube Video ID 
 
        width: 560,    // Player width (in px) 
 
        height: 400,    // Player height (in px) 
 
        playerVars: { 
 
         autoplay: 1,  // Auto-play the video on load 
 
         controls: 1,  // Show pause/play buttons in player 
 
         showinfo: 0,  // Hide the video title 
 
         modestbranding: 1, // Hide the Youtube Logo 
 
         loop: 5,   // Run the video in a loop 
 
         fs: 0,    // Hide the full screen button 
 
         cc_load_policy: 0, // Hide closed captions 
 
         iv_load_policy: 3, // Hide the Video Annotations 
 
         autohide: 0   // Hide video controls when playing 
 
        }, 
 
        events: { 
 
         onReady: function(e) { 
 
         e.target.mute(); 
 
         } 
 
        } 
 
        }); 
 
       } 
 

 
    </script>

Answer 2

당신은 아래를 참조하십시오 사업부 자바 스크립트가 목표로에서 클래스 "비디오 컨테이너"를 제거하고이

<div class="video-container"> 
<div class="" id="VideoPlayer"></div> 
</div> 

같은 사업부에 넣어 귀하의 페이지에서 위치 지정을 위해 별도의 컨테이너에 비디오가 포함 된 div 요소를 배치해야합니다. 그런 다음 css를 사용하여 비디오 컨테이너의 크기를 수정할 수 있습니다.

는 그런데이 jsfiddle

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

.video-container { 
    width: 100%; 
    height: 100%; 
} 

<div class="container"> 
    <div class="video-container" id="VideoPlayer"></div> 
</div> 

<script async src="https://www.youtube.com/iframe_api"></script> 
    <script> 
       function onYouTubeIframeAPIReady() { 
        var player; 
        player = new YT.Player('VideoPlayer', { 
        videoId: 'yusGUGTVAyw', // YouTube Video ID 
        playerVars: { 
         autoplay: 1,  // Auto-play the video on load 
         controls: 1,  // Show pause/play buttons in player 
         showinfo: 0,  // Hide the video title 
         modestbranding: 1, // Hide the Youtube Logo 
         loop: 5,   // Run the video in a loop 
         fs: 0,    // Hide the full screen button 
         cc_load_policy: 0, // Hide closed captions 
         iv_load_policy: 3, // Hide the Video Annotations 
         autohide: 0   // Hide video controls when playing 
        }, 
        events: { 
         onReady: function(e) { 
         e.target.mute(); 
         } 
        } 
        }); 
       } 

    </script> 

, 당신은 또한 유튜브 iframe이 API 호출에 고정 된 크기를 제거 할 수 있습니다보십시오.

Answer 3

이 URL에 대한 답변을 시도해 보셨습니까? 질문의 제목이 동일하기 때문에

Why is my embedded video not being responsive?

나는, 당신을위한 해답이 있다고 생각.

행운을 비네.

UPDATE : 링크는 (스티브)에 의해 질문에 대한 때문에

오, 당신이이 2 개 (또는 그 이상)의 시간을 요구했다.

나쁨.

나는 올바른 대답을 가지고 있다고 생각합니다. 어쩌면이 질문이나 다른 질문을 삭제할 수 있습니다 (직접 삭제할 수 있다고 생각할 수 있습니다).