javascript - YoutubeAPI video sometimes doesn't load in IE 11 -


i made website loads videos id database. using youtubeapi embed player in ie player doesn't load. here script.

<script>  var player; var player_width = $(window).width() - 100; var player_height = $(window).height() - 50;  $('.prev-next').height(player_height); $('.prev-next-but').height(player_height);  function onyoutubeplayerapiready() {     player = new yt.player('player', {         width: player_width,         height: player_height,       videoid: '<?php echo $yt_id; ?>',       events: {         'onready': onplayerready,         'onstatechange': onplayerstatechange       }     }); } function onplayerready(event) {     event.target.playvideo(); } function onplayerstatechange(event) {             if(event.data === 0) {         document.forms["not_skipped"].submit();     } }     

i don't have problem, when using simple iframe, don't know how trigger event way when video finishes.

first of all, check on method you're using load player api library. if you're using script tag, chances script loads before onyoutubeplayerapiready function ever defined, , nothing gets triggered. avoid such race condition, want load library this:

<script> 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; var player_width = $(window).width() - 100; var player_height = $(window).height() - 50;  $('.prev-next').height(player_height); $('.prev-next-but').height(player_height);  function onyoutubeplayerapiready() {     player = new yt.player('player', {         width: player_width,         height: player_height,       videoid: '<?php echo $yt_id; ?>',       events: {         'onready': onplayerready,         'onstatechange': onplayerstatechange       }     }); } function onplayerready(event) {     event.target.playvideo(); } function onplayerstatechange(event) {             if(event.data === 0) {         document.forms["not_skipped"].submit();     } } </script>   

now, thing you've mentioned -- it's simple hook player api existing iframe; need pass id of iframe yt.player constructor, , don't give width, height, or video id, this:

<iframe id="myplayer" width="560" height="315" src="//www.youtube.com/embed/0kl3vny0uai?enablejsapi=1" frameborder="0" allowfullscreen></iframe>     <script> 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 onyoutubeplayerapiready() {     player = new yt.player('myplayer', {       events: {         'onready': onplayerready,         'onstatechange': onplayerstatechange       }     }); } function onplayerready(event) {     event.target.playvideo(); } function onplayerstatechange(event) {             if(event.data === 0) {         document.forms["not_skipped"].submit();     } } </script> 

note we're still loading player library dynamically, avoid race condition.


Comments

Popular posts from this blog

java - How to specify maven bin in eclipse maven plugin? -

single sign on - Logging into Plone site with credentials passed through HTTP -

php - Why does AJAX not process login form? -