问题描述:

I am trying to make a YouTube video width change when the "onStateChange" event fires on 1(playing) and then make it come back to its original size on 0(ended) and 2(paused).

I am very new to JavaScript and jQuery. But let's say I have this

 <section><iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe></section>

<script>

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player( 'player', {

events: { 'onStateChange': onPlayerStateChange }

});

}

</script>

<script src="https://www.youtube.com/iframe_api"></script>

why does this jquery does not work?

jQuery(document).ready(function($) {

YT.PlayerState.ENDED = function(e) {

$('section iframe').animate({ width: "50%"}, 'slow')};

YT.PlayerState.PAUSED = function(e) {

$('section iframe').animate({ width: "50%"}, 'slow')};

YT.PlayerState.PLAYING = function(e) {

$('section iframe').animate({ width: "100%" }, 'slow');

}

the API information I have got comes from here https://developers.google.com/youtube/iframe_api_reference#Events

相关阅读:
Top