onYouTubeIframeAPIReady not working

  • I’m trying to use a script to create timestamp buttons for a YouTube video embedded on my WordPress site. The code works great when viewed outside of WordPress, and when previewed directly inside the Gutenberg editor, however when I publish the page or preview it, the video does not load. I don’t see any console errors, I’ve tried deactivating all my plugins, and have ensured that the onYouTubeIframeAPIReady function is available on a global level, as mentioned as a solution in other threads. I’m stumped on this, and would love any insight.

    My code is below, which I’ve been embedding directly into a custom HTML block in WordPress.

    <!DOCTYPE html>
<html>
  <body>
    <div class="responsive-container"><div id="player"></div></div>
    <br>
    <h2 style="text-align: center;"> Jump to Different Studios! </h2>
    <br>
    <input type="button" value="Intro" onclick="setCurrentTime(0)" />
    <input type="button" value="Jewelry & Flameworking" onclick="setCurrentTime(1)" />
    <input type="button" value="Plasma Cutting" onclick="setCurrentTime(2)" />
    <input type="button" value="Welding" onclick="setCurrentTime(3)" />
    <input type="button" value="Metal Shop" onclick="setCurrentTime(4)" />
    <input type="button" value="Glassblowing" onclick="setCurrentTime(5)" />
    <input type="button" value="Blacksmithing" onclick="setCurrentTime(6)" />
    <input type="button" value="Woodshop" onclick="setCurrentTime(7)" />
    <input type="button" value="Woodturning" onclick="setCurrentTime(8)" />
    <input type="button" value="Ceramics" onclick="setCurrentTime(9)" />
    <input type="button" value="Electronics & Digital Fab" onclick="setCurrentTime(10)" />
    <input type="button" value="Computer Lab" onclick="setCurrentTime(11)" />
    <input type="button" value="Textiles" onclick="setCurrentTime(12)" />
    <input type="button" value="Mixed Media" onclick="setCurrentTime(13)" />
    <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;

      window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('player', {
          height: '500',
          width: '100%',
          videoId: 'GxuLApckigo',
        });
      };
    </script>
    <script>
      function setCurrentTime(slideNum) {
        var object = [0, 26, 39, 48, 63, 75, 81, 100, 108, 115, 134, 163, 168, 177 ];
        player.seekTo(object[slideNum]);
      }
    </script>
  </body>
</html>

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘onYouTubeIframeAPIReady not working’ is closed to new replies.