psychopy.org | Reference | Downloads | Github

Embedded YouTube video success story

Using code from Custom web component for online experiments: Forms, surveys, questionnaires, and other web-based content I have just tested the addition of an embedded YouTube video in a PsychoPy experiment. You can view the result in my template experiment. https://pavlovia.org/Wake/brookes-template-2020

This technique should work with any html content. The PsychoPy routine ends on the submission of an html form, or in any of the usual ways.

Thank you @arnon_weinberg. I’ll add your code and reference your post in my crib sheet https://docs.google.com/document/d/13jp0QAqQeFlYSjeZS0fDInvgaDzBXjGQNe4VNKbbNHQ/edit?usp=sharing

If anyone has suggestions for improving the interface, please post here. The YouTube code is:

<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>

I’ve tested and php files don’t work.

7 Likes

HI
@wakecarter
thank you so much for this! since i dont know much about JS i found it hard to change you youtube html file to my own.
would some help solving that.
my youtube link is Headspace | Mini meditation | Find your focus - YouTube
i have used your link and it works (online only not on the builder)

Try this. Your video is IReEu2kI6oI

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

thank you! i played with it and got it to work and on the way learned about the embed option on youtube :slight_smile:

1 Like

Hi its me again,

i would like to make some changes to the code so that instead of a continue button in the youtube.html file, the movie will automatically close once the movie ends.
I guess i need to make changes in the iframe code and add a time condition before continue_routine = false?,( i removed the continue button from the html file)
my video’s length is exactly 1:16 min.
I know how use the timer in python but no sure how to work with your JS script.

let src = 'youtube.html';
params = {};  // Results added here after form is submitted
continue_routine = true; // Routines can't be ended from within Begin Routine
$(document).ready(function() {
    // Add custom contents from html file using an iframe:
    $('body').append('<div id="iframe-o" style="visibility: hidden; position: relative; display: table; margin: auto;"><div id="iframe-m" style="display: table-cell; vertical-align: middle;"><div id="iframe-i" style="display: inline-block; width:100%; overflow-y: auto; overflow-x: hidden;"><iframe id="iframe" src="'+src+'" frameborder=0 style="width: 100%"></iframe></div></div></div>');

    $('#iframe').on('load',function(iframe){
        // Auto-adjust iframe size:
        $(this).contents().find('html').css({ 'display': 'table', 'width': '100%', 'overflow-x': 'hidden' });
        $('#iframe-o').height($(window).height()-20, true);
        $('#iframe-m').width($(this).contents().find('html').width()+20);
        $('#iframe-i').height ( Math.min ( $(this).contents().find('html').height()+20, $(window).height()-20 ), true );
        $(this).height($(this).contents().find('html').height());
        $('#iframe-o').css('visibility','visible');

        // If iframe contains a form, then capture its output:
        $(this).contents().find('form').on('submit',function(e){
            e.preventDefault();
            $.each($(this).serializeArray(),function(i, param){
                params[param.name] = param.value;
                psychoJS.experiment.addData(param.name, param.value);
            });
            console.log ( 'DEBUG:FRM', params );
            // Remove iframe and continue to next routine when done:
            $('#iframe-o').remove();
            continue_routine = false;
        });
    });
});
//$('#iframe').attr( 'src', function(i,val){ return val;} );

Also is there a way to make the video size a full screen and not a specific size?
hope i am not bothering you with my endless questions.

<!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: 850px; background-color: grey;">

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


  </body>
</html>

Thank again!

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