0

I've been trying to implement a feature for my website. It is supposed to stop an embed YouTube video when another is run. So I've found a working code somewhere which uses javascript and jquery, tried to play around it, everything works fine but only until I put in on the actual website on wordpress. I suppose the javascript/jquery inserted simply doesn't run but I must admit my javascript knowledge is very limited. My code:

$(function() {
  players = new Array();

  function onYouTubeIframeAPIReady() {
    var temp = $("iframe.yt_players");
    for (var i = 0; i < temp.length; i++) {
      var t = new YT.Player($(temp[i]).attr('id'), {
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
      players.push(t);
    }

  }
  onYouTubeIframeAPIReady();


  function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.PLAYING) {
      var temp = event.target.a.id;
      var tempPlayers = $("iframe.yt_players");
      for (var i = 0; i < players.length; i++) {
        if (players[i].a.id != temp) players[i].stopVideo();
      }
    }
  }
});
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflS50iB-/www-widgetapi.js" async=""></script>
  <script type="text/javascript" src="https://www.youtube.com/player_api"></script>
</head>

<body>
  <iframe class="yt_players lazy" id=player0 width=385 height=230 src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder=0 allowfullscreen data-src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0"></iframe>
  <iframe class="yt_players lazy" id=player1 width=385 height=230 src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder=0 allowfullscreen data-src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0"></iframe>
  <iframe class="yt_players lazy" id=player2 width=385 height=230 src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder=0 allowfullscreen data-src="https://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0"></iframe>

</body>

</html>

What I have checked so far:

  1. Jquery is working fine.
  2. I thought the code could be changed somehow due to lazy loading option I use for my website, but it seems like the code remains the same. Same for javascript code.
  3. I do not see any console errors.
  4. I tried to put the script in any position possible, nothing changes.
  5. Tried to wrap in $(function)(), no luck there as well.
  6. Checked multiple sandboxes/playgrounds, the code is working on every single of them.

What could be a problem here and what else should I try? I appreciate any help!

Barmar
  • 741,623
  • 53
  • 500
  • 612
Alex
  • 1
  • Post your code here, not as a link to an external website. – Barmar Feb 04 '21 at 00:34
  • Does `$(document).ready(function() { ... });` change anything – Da Mahdi03 Feb 04 '21 at 00:35
  • @DaMahdi03 That's the same as `$(function(){...})` – Barmar Feb 04 '21 at 00:36
  • What errors are in the console on the wordpress site? – letthewookieewin Feb 04 '21 at 00:44
  • @letthewookieewin When I put the script into html (saw it suggested by someone else) it didn't give me any error. If I try to put js/jquery in the footer, which is the suggested way (at least by my theme's help center), I can see the error Uncaught TypeError: YT.Player is not a constructor. It doesn't seem to happen on a sandbox. – Alex Feb 04 '21 at 00:52

1 Answers1

0

First thing I would do is, on the site where you are having the issue, press F12 (if IE or Chrome) to bring up developer tools or enable web inspector if on the Mac. Check the network tab and ensure that the resources you depend on all have status 200 or got cached with whatever cache scheme you have.

Then look at your console errors from the console tab. From the link you included, this is the message repeated on the console tab:

"Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>')."

So simply compare the developer tools console and network tabs for when its working to the same when it is not working and look up the console errors.

If what I found is the main issue, you can see the solution here: Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000

Chuma
  • 714
  • 3
  • 7