Youtube iframe API

[Martin Mullan]

Hi all,

I have had success making some videos appear on my my htmlservice page; I've used https://developers.google.com/youtube/iframe_api_reference and altered it to make multiple videos appear at the same time.

My issue now is that I can't seem to update the global variable with the dynamic list of video IDs coming from my gsheet.

Part of code:

<script>

var videos = ["VTCGs80yhZI","IfiJlY2ffkI"];

   console.log("global videos = " + videos);

google.script.run.withSuccessHandler(vidurls).allLinks();

function vidurls(data) {

   for( i = 0; i < data.length; i++){

      videos.push = data[i][3];

      console.log("data = " + data[i][3] );

      console.log("videos pushed = " + videos);

}}

</script>

Console log:

global videos = VTCGs80yhZI,IfiJlY2ffkI

data = cVFqME-NW9s

videos pushed = VTCGs80yhZI,IfiJlY2ffkI

data = ds04BA9DIu8

videos pushed = VTCGs80yhZI,IfiJlY2ffkI

The static IDs in the videos global array work fine and videos present as expected. I left 2 ids in the array to see if the variable in the function was reading it, which it seems to be, but the .push isn't adding the 2 new IDs from the script.run function that is bringing back my IDs from the gsheet.

What am I missing here? If you can help by rewriting my code a bit that would be great 😜

Regards, Mart.

[Alan Wells]

Currently:

videos.push = data[i][3];

Should be:

videos.push(data[i][3]);

[Martin Mullan]

Thankyou. I am facepalming as I type!

So, that works but I think the asynchronous way the page is loading is causing the videos to not load. Is there a way to allow the google.script.run to complete before running the rest of the jscript?

M.

[Alan Wells]

The documentation at your given link shows one way to use the YouTube API.

What it's doing, is running some code as soon as the HTML is loaded in the browser.

The code below is code that I've copied from the example, showing the client side code that is running automatically when the page loads because it's in the global scope.

I think what you need to do, is to remove SOME of that code from the global scope, and put it into a function, and then call that new function from your success handler function.

Your success handler function is "vidurls"

So, the vidurls function should call some other function that has the below code in it.

CURRENTLY:

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;

TRY:

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;

function vidurls(data) {

   for( i = 0; i < data.length; i++){

      videos.push = data[i][3];

      console.log("data = " + data[i][3] );

      console.log("videos pushed = " + videos);

}

   createIframes();//Create the Iframes

}

window.createIframes = function() {

      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

}

I probably got something wrong.  I have never used this code, and have no experience with this.

But, what you want to do is to prevent some of that code from running until after your success handler has updated the array.

My attempt might be totally wrong, I don't know.

You could try it and see what happens.

Maybe it will give you an idea.

[Martin Mullan]

Thanks Alan, that worked first time :)

FYI, my use case is as a teacher who likes to know if...and when...my students use the resources I provide for them in my gsite. As such, I have removed all of the static content from my Gsites and created a kind of GSheets content management system that presents the correct content to the sites page (my intention in the future is to link this to my gsheets lesson planner for the department and maybe even to build Classroom assignments from it automagically.) This would be easier if new sites had script support, but for now I've got my embedded web app taking a url parament of the lesson(page) title. The code inserts an update back to the gsheet of the link that has been clicked, but until now, I couldn't do the youtube clips....so thanks for your support.

Mart.

[Alan Wells]

Thanks for letting me know that it worked.

Sounds like you've got a good system that would be useful to teachers in general.

How do your students like it?

[Brett Grear]

Does this allow you to find out which students specifically have accessed the resources?

I've tried something similar, although less sophisticated, which used a script within a spreadsheet to convert a drive or youtube link into a Firebase shortcode (custom for our school) that took the students to a webapp with the video embedded and logged their use.  Unfortunately, this was limited by ScriptApp.getActiveUser() which would only work in certain circumstances.  Worked great if the students were on a Chromebook but not so well if they were on PC or Mac with their parents also logged in on their own accounts. 

[dimud...@gmail.com]

@Brett Grear: It might be possible to mitigate some of those issues if your students have their own profile setup in chrome. Having distinct user profiles at the browser level (chrome only) allow users to get around some of the issues that crop up with having multiple logins under a single profile.

[Brett Grear]

Yeh I encourage that but it's always difficult when the students are using their own devices at home.  Parents have all sorts of strange setups going on.  I think those using tablets or iPads don't work either.

It is what it is unfortunately.  Luckily, Edpuzzle handles the task quite well. It's just a bit of extra setup.

[Martin Mullan]

Hi Brett,

Yes, all of my links, and now YT clips, append the time, user and resource title (onclick) to my log gsheet. 

Alan asked how my students like my Gsite; hopefully they don't notice any difference other than the loading is a couple of seconds slower. I had created lesson level Classic GSites for my biology topics which had specific resources but then/when I needed to very quickly put the content into a new gsite I stuck all of my topic resources into a GDrawing and embedded that. This was fine as I would point out to the students which resources to use in class...but then COVID! One of my students got stuck in Germany...we live in Kuala Lumpur! While this student did their best to be awake at 3am to work synchronously with their peers, it wasn't always possible and they made the observation that the extra resources in the lesson page was getting in their way; I needed to get more specific and my student's comment was the final push I needed to rebuild everything!  

I run a Flipped Classroom and having my students develop the self-regulation required to be effective learners requires that they do the preparation tasks in a timely and complete fashion. Knowing when my students are accessing my resources, combined with form submission times, GSlide eBook edits, commenting and responses to my comments, gives me a good picture of their learning behaviours. By creating this content management system and logging access and resource access, I have been able to intervene early to support the less than motivated students, but also to support wellbeing issues of those that are overdoing it and working at 1 or 2 am in the morning! While my monitoring is totally 'big brother' LOL....the relationships I have formed with my students are more personal and meaningful as a result.

My school has Google Workspace for Edu accounts for all teachers and students and we are 'bring your own browser'. At the start of the year, our tutors demo to their tutees how to set up the Chrome profiles and how to keep one for 'work' and one personal! I have created dashboards that our pastoral teams can use to have their students give feedback on reports and grades etc, which 'forces' the students to use their school accounts and profiles properly. When I do get a report that a student can't see their dashboard, it is usually because their browser is having issues with the profiles: I have them go incognito to verify their account is ok, or use Safari, then remind them to keep their profiles separate.

Admittedly, I haven't seen an issue like this with my access logs.

Mart.

[Kim Nilsson]

Impressive and cool, Martin, and as you write also very useful for you.