Trình phát nội tuyến trên YouTube - kích hoạt chế độ toàn màn hình trên iOS

Question

Sử dụng trình phát nội tuyến iframe của YouTube, có cách nào kích hoạt toàn màn hình theo chương trình không? Tôi muốn loại bỏ các điều khiển mặc định (bằng cách sử dụng điều khiển = 0) nhưng sau đó có khả năng tạo nút toàn màn hình tùy chỉnh của chính nó.

Answer 1

Tận dụng iframe không toàn màn hình nhưng Trang đầy đủ:

function fullscreen() { 
 
     var vid = document.getElementById("vid"); 
 
     vid.style.position = "absolute"; 
 
     vid.style.width = "100vw"; 
 
     vid.style.height = "100vh"; 
 
     vid.style.top = "0px"; 
 
     vid.style.left = "0px"; 
 
     document.getElementById("exit").style.display = "inline"; 
 
    } 
 
    function exitfullscreen() { 
 
     var vid = document.getElementById("vid"); 
 
     vid.style.position = ""; 
 
     vid.style.width = ""; 
 
     vid.style.height = ""; 
 
     vid.style.top = ""; 
 
     vid.style.left = ""; 
 
     document.getElementById("exit").style.display = "none"; 
 
    }

<iframe width="560" height="315" src="https://www.youtube.com/embed/fq6qcvfZldE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" id="vid" allowfullscreen></iframe> 
 
    <button onClick="fullscreen()">Fullscreen</button> 
 
    <button style="position: fixed; 
 
        bottom: 5px; 
 
        right: 5px; 
 
        display: none; 
 
        z-index: 2000;" id="exit" onClick="exitfullscreen()">Exit Fullscreen</button>

Các trang đầy đủ nút ở góc trên bên phải của đoạn mã cũng làm việc theo cách này. Nếu bạn muốn làm cho trình duyệt toàn màn hình, bạn có thể thử document.requestFullscreen();, nhưng điều này vẫn còn thử nghiệm và hoạt động trên rất ít trình duyệt. Hãy xem chủ đề của MDN về chức năng này.

CHỈNH SỬA: Chỉ tìm thấy: https://developers.google.com/youtube/?csw=1#player_apis, API trình phát youtube chính thức.

Answer 2

Hãy thử như sau trong trình duyệt Webkit:

if (typeof iframe.webkitRequestFullScreen === 'function') { 
    button.addEventListener('click', function() { 
     iframe.webkitRequestFullScreen(); 
    }, false); 
} 

Lưu ý rằng điều này sẽ không làm việc mà không có một cử chỉ sử dụng (trong trường hợp này, nghe tiếng 'click').

Answer 3

Bạn có thể sử dụng thư viện này XCDYouTubeKit thay vì trình phát nội tuyến iframe.
Rất đơn giản và mạnh mẽ. Hỗ trợ toàn màn hình cũng như không toàn màn hình.