Embedded YouTube video success story

Automatic submission should be possible using PsychoPy.

Instead of continueRoutine = continue_routine; in Each Frame have:

if ((t > 76)) {
    continueRoutine = false;
}

though you might want to add a second or two for loading time.

For full screen try width="100%" height="100%"

1 Like

hi thank you for the fast reply
for some reason the routine continues in the background but the video is not closing unless i add the continue button and click on it
Regarding the screen size, the screen actually got smaller when i changed to 100%

In that case, maybe the best option is to auto submit the form in the html

Here’s a link that should help

thank you! I am unfamiliar with that but will look into it more

Hi @wakecarter, I have a set of 30 youtube links and I want to play those videos randomly for the user of my experiment, So I want to play the video link and it should be embedded within my experiment. However, the order is randomly generated and a particular video link should be played.
Can you please assist me with the following task.

Have you managed to set up your experiment so it plays one video link and an Excel file with the YouTube codes of the 30 videos? I think it should be fairly easy to edit it to take the selected video from the Excel file?

I do have an excel in which I have youtube links of the 30 videos, however I was unable to set up the experiment can you please assist. Also I want to present a questionnaire once the video ends instead of the continue button

I just want assistance in embedding a youtube video via given link in my pschopy experiment .

@wakecarter I am unable to run your experiment Pavlovia locally , it is not working and giving errors in the version2020.2 of the PsychoPy . Can you please assist

I don’t think it will work locally, but it is working online for me. Please try another browser or give me details of the error message.

Is it in some possible to run an online youtube link locally , without downloading the link due to copyright issue’s

Sorry, I don’t know how to do that.

I’m having some difficulty doing this. I can hard code a video url into the html file and it plays, but I’m not sure how to dynamically change it. I have a separate csv that has all of the links (with a loop that adds each url to a list at the start of the experiment), but I’m not sure how to pass it the variable into the html file.

Have a look at my demographics demo to see how I pass variables to the embedded file.

Hi @wakecarter,
Thank you so much for your demos, they have been really helpful!

I am having some difficulty implementing this. Originally, I was getting a " * ReferenceError: showVideo is not defined" I fixed this by editing the code to what you see in the picture below. I also added the specific identifier for the video I want to use. However, I am getting a “404 not found” error. I am not sure how to resolve this, I assume there is some issue with the code finding and presenting the correct video from youtube but I do not know how to resolve the issue. I would appreciate any suggestions you have.

David

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>