[ARCHIVED] YouTube Embed

[markee]

When you embed the YouTube link and then press play the YouTube symbol appears on the bottom of the video. This allows you to click on it and go to YouTube. Isn't this not supposed to happen so the kids don't get into YouTube?

[James · Accepted solution]

 @markee  

I work in higher education and Canvas doesn't do any policing of YouTube videos for us. I have no knowledge of whether Canvas does that at the K12 level or it is left to the schools to implement on their firewalls. As students have remote learning from home, they would be outside the school's protections.

Here's something that you can do on your own by editing the HTML embed code.

According to the YouTube IFrame Player API, you can disable the Watch on YouTube link by adding modestbranding=1 to the querystring on your embed code. However, if the student pauses the video, then a screen of related videos will appear and the user can click on them and watch them. The first query parameter is separated from the pathname by a question mark ? and additional parameters are separated by ampersands &. If you have a start parameter already there, then your querystring would look like ?start=10&modestbrowsing=1.

If you add sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation" to the embed code attributes, then the Watch on Youtube link will appear, but you cannot click on it. Furthermore, you cannot click on the screen that pops up when you click the pause button.

If you combine the two, you can get rid of the link and prevent them from clicking on the links.

Below is some code that I put into Canvas for testing purposes.

1. Default embed code from YouTube
2. Embed code with modestbrowsing=1 to hide the YouTube link
3. Embed code with sandbox to prevent clicking on links
4. Embed code with modestbrowsing and sandbox to hide YouTube link and disable other links

<p><iframe src="https://www.youtube.com/embed/_UoTTq651dE" width="560" height="315" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></p>
<p><iframe src="https://www.youtube.com/embed/_UoTTq651dE?modestbranding=1" width="560" height="315" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></p>
<p><iframe src="https://www.youtube.com/embed/_UoTTq651dE" width="560" height="315" sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></p>
<p><iframe src="https://www.youtube.com/embed/_UoTTq651dE?modestbranding=1" width="560" height="315" sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></p>‍‍‍‍

Note that you cannot disable the related videos. Prior to September 25, 2018, you could, by adding rel=1 to the query parameters. Now setting rel=1 means nothing but rel=0 means that related videos should come from the same channel that was just played. Sneaky of YouTube. They are an advertising platform, after all.

[bclarkson040]

Hey James,

This is very helpful.

Do you know if there is a way to do a similar thing with a YouTube video that has been added to Canvas Studio using the external link tool and embedded in a Canvas Page using Studio Plugin on the rich content editor?

Basically, I want to take advantage of Canvas Studio Insights for a series of videos that I currently embed from YouTube. I was planning on adding them to my Studio library using the external link tool and embedding them as I described above. However, for various reasons (many have to due with a richer set of controls), students have been preferring to watch the videos on YouTube (and navigating there by using the link in the Studio video). When they do, I miss out on the Studio Insights for those views and am trying to figure out a way to prevent this.

Thanks for any insight you can provide.

-Bryan