eeeetaaaa
eeeetaaaa

Reputation: 19

Disable full screen on youtube API - javascript

How to disable youtube API being fullscreen? I use my custom video controller. However, double clicking video will make it enter fullscreen. I have tried to set player parameter 'fs':0 or set iframe attribute "allowfullscreen" to 0, but neither worked. Also, I don't want to set the youtube iframe css "pointer-event" into none. Because, sometimes youtube banner ads are annoying.

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

var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('yt-player', {
		height: '360',
	  	width: '640',
		videoId: 'EoyU6FvgbJ4',
		playerVars: { 
			'controls': 0,
            'showinfo': 0,
			'rel':0,
			'fs':0
  		}
	});
}
<div id="yt-player"></div>

Upvotes: 1

Views: 3818

Answers (2)

Mazi Tra
Mazi Tra

Reputation: 29

Your syntax inside the "playerVars" is wrong, the following code worked for me :)

return new YT.Player(domElementId, {
  videoId: youTubeVidId,
  startSeconds:0,
  width: 820,
  height: 461,
  playerVars: {
    rel: 0,
    showinfo: 0,
    fs: 0
  }
});

}

Upvotes: 2

user2267175
user2267175

Reputation: 593

JS, without testing it, but something like this should do the trick;

It will fire with All fullscreenchange events that run on the element. it then proceeds to check for browser/prefix and execute a "exitFullscreen".

//videoElement is the ID of the html videoElement; e.g; <video id="thisIsIt">
videoElement.addEventListener('fullscreenchange', function(){
  if (document.exitFullscreen) document.exitFullscreen();
  else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
  else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
  else if (document.msCancelFullScreen) document.msCancelFullScreen();
});

Upvotes: 0

Related Questions