Menu
I want to add a class (e.g. yt-fullscreen) to the <body> element when the player goes fullscreen.
Is there a way to get when the player goes in the fullscreen mode?
In the docs I didn't find any relevant event for that.
Maybe is there a way to check if the player is or not in the fullscreen state?
827
Try like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yt fullscreen</title>
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//cdn.rawgit.com/vincepare/iframeTracker-jquery/master/jquery.iframetracker.js"></script>
</head>
<body>
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$(document).ready(function($){
$('iframe').iframeTracker({
blurCallback: function(){
setTimeout(function(){
if ($('iframe').width()<=560) {
$('body').removeClass('yt-fullscreen');
}else{
$('body').addClass('yt-fullscreen');
}
}, 2000);
}
});
});
</script>
</body>
</html>
Player can't be checked because we get only iframe. So only thing that's left is to work with iframe.
75
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
