HTML5 비디오 플레이어 전체 화면 문제

우리는 자료를 Wordpress 사이트에 게시합니다. iframe을 사용하여 소스 코드를 만들었습니다. iframe 페이지 전체 화면을 정상적으로 열 때. 그러나 iframe 내부의 동영상은 전체 화면에서 작동하지 않습니다. iframe에 상대적으로 전체 너비와 높이가 있기 때문입니다. 내가 무엇을 할 수 있을지?HTML5 비디오 플레이어 전체 화면 문제

출처

2014-12-21 Fatih SARI

IFrame 소스를 새 탭에서 실행할 때 IFrame에서 열리지 않기 때문입니다. iframe을 통해 게재되는 동영상을 다룰 때 높이를 설정해야합니다. 그렇지 않으면 브라우저에서 iframe을 정적 높이 150px로 렌더링합니다.이 높이는 대부분의 동영상에서 너무 많이 쪼그리고 더 어리석은 짓을합니다. 여기

은 당신이 할 수있는 것입니다 :

코드 :이 기술을

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <style type="text/css"> 
    .videoContainer { 
     position: relative; 
     padding-bottom: 56.25%; 
     padding-top: 25px; 
     height: 0; 
    } 
    .videoContainer iframe { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    } 

    </style> 
</head> 
<body> 
    <div class="videoContainer"> 
     <iframe scrolling="no" width="640" height="360" src="http://video.localhost/embed?video=HLuUyE9-qcA&width=640&yukseklik=360&kali‌te=medium&vidp=11783" style="overflow: hidden;" frameborder="0" allowfullscreen></iframe> 
    </div> 
</body> 
</html>

, 당신은 고유 비율, 다음 절대 위치 비디오 내에있는 다른 요소에 비디오를 포장 그. 그것은 우리가 의지 할 수있는 적당한 높이로 유체 폭을 제공합니다.

출처

2014-12-21 19:48:32

왜? iframe의 전체 화면 버튼 내 선수는 자바 스크립트로 만들었습니다. –

여기에 샘플 임베드 코드를 게시하면 더 명확하게 나타납니다. –

예 : ' –

HTML5 비디오 플레이어 전체 화면 문제

답변

관련 문제