我与我的浏览器搏斗并为你挽救了这个。下次小心点。
HTML
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Full Screen Example</title>
</head>
<body>
<button id="fullsc">set source to iframe and take me full screen</button><br><br>
<iframe id="myvideo" src="http://stackoverflow.com"></iframe>
</body>
</html>
CSS
/* make the video stretch to fill the screen in WebKit */
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;}
iframe{
position: absolute;
height: 100%;
width:100%
}
Javascript
var videoElement = $('#myvideo');
var fullsc = $('#fullsc');
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
fullsc.onclick = function(){
//setiframeurl();
toggleFullScreen();
};
function setiframeurl(){
$('#myvideo').attr('src', "http://radbox.me/watch/mobile?c=21&du=35");
}