Hãy youtube video toàn màn hình sử dụng iframe và javascript API

Question

Tôi có một youtube video được nhúng với các điều khiển ẩn:

<iframe id="ytplayer" type="text/html" width="400" height="225" 
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0 
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer" 
frameborder="0" allowfullscreen></iframe> 

tôi có thể kiểm soát nó với các API youtube Javascript.

var tag = document.createElement('script'); 

tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 
function onYouTubeIframeAPIReady() { 
player = new YT.Player('ytplayer', { 
    events: { 
    'onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
    } 
}); 
} 

Những thứ như player.playVideo() và tiếp tục hoạt động hoàn hảo. Bây giờ tôi đang tìm cách để phát video ở chế độ toàn màn hình với cuộc gọi Javascript nhưng tôi không thể tìm thấy bất kỳ phương thức nào trong API.

Thậm chí có thể (không có kiểm soát) và nếu có - như thế nào?

Answer 1

Có thể xem câu hỏi tương tự này. Có vẻ như điều này có thể làm việc cho bạn (sử dụng api fullscreen javascript chứ không phải là API Youtube):

Full Screen Option in Chromeless player using Javascript?

Answer 2

Bạn có thể thử thiết lập kích thước khung nội tuyến để kích thước cửa sổ thông qua javascript.

Something như thế này (sử dụng jQuery):

$('ytplayer').attr('width', $(window).width()); 
$('ytplayer').attr('height', $(window).height()); 

Tôi hy vọng điều này có thể giúp bạn.

Answer 3

Tôi đã thêm mã để làm toàn màn hình (toàn màn hình thực, không phải cửa sổ đầy đủ) vào câu trả lời của tôi trên Auto-Full Screen for a Youtube embed.

YouTube không hiển thị toàn màn hình trong API của họ, nhưng bạn có thể gọi hàm requestFullScreen() của trình duyệt gốc từ sự kiện playerStateChange() từ API YouTube hoặc tạo nút phát tùy chỉnh của riêng bạn như tôi có.

Answer 4

Bạn có thể sử dụng html5 api toàn màn hình:

node.requestFullScreen(); 
document.cancelFullScreen(); 
document.fullScreen; // bool 

Nhưng lưu ý rằng:

• này thường đòi hỏi nhà cung cấp tiền tố cụ thể như mozRequestFullScreen() hoặc webkitRequestFullScreen
• requestFullScreen phải được kêu gọi sự kiện người dùng (như onclick)
• trong firefox toàn màn hình sẽ có màu đen cho đến khi "Cho phép" được người dùng nhấp

Answer 5

Nhìn vào tham khảo API cho các cầu thủ iframe, tôi không nghĩ rằng nó có thể thiết lập nó để toàn màn hình (với iframe API một mình) - ctrl f không tìm thấy toàn màn hình, do đó, hoặc đó là một phương pháp bí mật ẩn bên trong API hoặc nó không tồn tại. Tuy nhiên, như bạn có thể biết, bạn có thể đặt kích thước của trình phát player.setSize(width:Number, height:Number):Object, sau đó thực hiện window fullscreen.

Answer 6

Điều này làm việc hoàn hảo trong trường hợp của tôi. Bạn có thể tìm thêm thông tin về liên kết này: demo on CodePen

var player, iframe; 
var $ = document.querySelector.bind(document); 

// init player 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
    height: '200', 
    width: '300', 
    videoId: 'dQw4w9WgXcQ', 
    events: { 
     'onReady': onPlayerReady 
    } 
    }); 
} 

// when ready, wait for clicks 
function onPlayerReady(event) { 
    var player = event.target; 
    iframe = $('#player'); 
    setupListener(); 
} 

function setupListener(){ 
$('button').addEventListener('click', playFullscreen); 
} 

function playFullscreen(){ 
    player.playVideo();//won't work on mobile 

    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; 
    if (requestFullScreen) { 
    requestFullScreen.bind(iframe)(); 
    } 
}