Embedded YouTube video success story

You are setting src as an iframe rather than an html file, which is what the code is expecting.

You might be able to do it that way but my iframe knowledge is not up to helping you. Your previous error sounds easier to debug.

Ah I understand. This was a mistake rather than being something I require. So I should create a html file that contains the youtube link I want to call upon? should this include just the youtube url or also the piece of code below from your original post with my specific youtube video identifier in place of the je5V…?

Here is the contents of youtube.html from my Brookes Template 2020

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
    <style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    </script>
  </head>

  <body style="width: 840px; background-color: grey;">

<iframe width="840" height="475" src="https://www.youtube-nocookie.com/embed/je5Vw0rMiWk?controls=0&amp;autoplay=1&amp;start=0&amp;allowfullscreen=0&amp;loop=1&amp;playlist=je5Vw0rMiWk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <form style="padding-top: 1em; text-align: right;">
      <input type="submit" value="Continue" />
    </form>

  </body>
</html>

Thank you! The issue is resolved. This was a great help as all your content on the forum has been while navigating the building of my first multicomponent experiment.

I will post below what I ended up as I had to do a bit of creative mixing and matching to get things working properly and it might help people troubleshoot in the future.

1 Like

Debugging workaround explained: I kept running into the error in the picture below. I used this workaround from stack overflow to get the video working. However, this meant the continue button was then not present. To solve this, I added most of Wakecarter’s source code to the altered code from stack overflow. One alteration you may have to make after using this alteration is to align text to the left instead of the right in the form section of the code as if may appear somewhere random on the screen otherwise. The code from my working html file is below incase anyone runs into this issue in the future

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
    <style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    </script>
  </head>

  <body style="width: 840px; background-color: grey;">

<iframe width="840" height="475" src="https://www.youtube.com/embed/111DK1bXMkg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <form style="padding-top: 1em; text-align: right;">
      <input type="submit" value="Continue" />
    </form>

  </body>
</html>