CODEWITHSUNDEEP
javascriptjqueryiframeyoutube
Gromain
Gromain

Reputation: 123

How to dynamically autosize a youtube iframe?

I'm trying to autosize my youtube iframe with window.onresize = function(event)

but, it's working only during the loading of the web page...

Here is my code:

<iframe id="player" width="560" height="315" src="//www.youtube.com/embed/xWPDujqIwZc" frameborder="0" enablejsapi="1"></iframe>
<script type="text/javascript" src="youtube.js"></script>

and:

youtube.js

var Lscreen=window.innerWidth;
var largeur=Lscreen-17;

$("#player").attr("width", largeur);
$("#player").attr("height", largeur*.78);

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('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) 
{
    event.target.playVideo();
    player.mute();
}

function onPlayerStateChange(event) {
if (event.data == 0) 
    {
        event.target.playVideo();
    }
}


window.onresize = function(event) 
{
    Lscreen=window.innerWidth;
    //alert(Lscreen);
    $("#player").attr("width", largeur);
    $("#player").attr("height", largeur*.78);
}

Upvotes: 1

Views: 836

Answers (1)

Stefano Dalpiaz
Stefano Dalpiaz

Reputation: 1673

You are only calculating the window width once at page load, and you are always using that same width to resize. simply update that variable inside your onresize function like so:

window.onresize = function(event) 
{
    Lscreen=window.innerWidth;
    largeur=Lscreen-17; // add this line
    //alert(Lscreen);
    $("#player").attr("width", largeur);
    $("#player").attr("height", largeur*.78);
}

Upvotes: 2

Related Questions