Menu
I need to make iframe enter fullscreen mode, i am using iframe to display pdf file by google docs viewer i need this iframe to enter fullscreen. I have found an code in the internet for displaying html video and iframe and there full screen but when i try to remove the video, the fullscreen never work In this code the iframe (fullscreen) not working
<!DOCTYPE HTML>
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
<title>Fullscreen API | The CSS Ninja</title>
<div class="fl">
<iframe src="http://thecssninja.com/talks/dnd_and_friends/" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
<button id="fullscreeniframe" class="button">Fullscreen iframe</button>
</div>
<script>
(function(window, document){
var $ = function(selector,context){return(context||document).querySelector(selector)};
var video = $("video"),
iframe = $("iframe"),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
var fullscreen = function(elem) {
var prefix;
// Mozilla and webkit intialise fullscreen slightly differently
for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
prefix = domPrefixes[i].toLowerCase();
if ( elem[prefix + 'EnterFullScreen'] ) {
// Webkit uses EnterFullScreen for video
return prefix + 'EnterFullScreen';
break;
} else if( elem[prefix + 'RequestFullScreen'] ) {
// Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
return prefix + 'RequestFullScreen';
break;
}
}
return false;
};
// Will return fullscreen method as a string if supported e.g. "mozRequestFullScreen" || false;
var fullscreenvideo = fullscreen(document.createElement("video"));
// Webkit uses "requestFullScreen" for non video elements
var fullscreenother = fullscreen(document.createElement("iframe"));
if(!fullscreen) {
alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
return;
}
// Should add prefixed events for potential ms/o or unprefixed support too
video.addEventListener("webkitfullscreenchange",function(){
console.log(document.webkitIsFullScreen);
}, false);
video.addEventListener("mozfullscreenchange",function(){
console.log(document.mozFullScreen);
}, false);
$("#fullscreenvid").addEventListener("click", function(){
// The test returns a string so we can easily call it on a click event
video[fullscreenvideo]();
}, false);
$("#fullscreeniframe").addEventListener("click", function(){
// iframe fullscreen and non video elements in webkit use request over enter
iframe[fullscreenother]();
}, false);
})(this, this.document);
</script>
http://www.thecssninja.com/demo/fullscreen/
386
Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method. Note: This attribute is considered a legacy attribute and redefined as allow="fullscreen" .
An inline frame is used to embed another document within the current HTML document. For the fullscreen Iframe, you have to cover the entire viewport.
The width and height inside the embed code can be adjusted by changing the numbers between the quotation marks, shown below. The standard size of an iframe for desktop is a width of "560" and height of "315."
I have extended the solution provided by @A.Wolff , I have added a button within the Iframe you can check the solution right here on w3
Full screen toogle with inside/internal button| W3
Regards
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
