[ARCHIVED] Embed Zoom video and transcript into a Canvas page

[whitney_clay]

I'm looking for html code to embed a lecture recorded to the cloud with Zoom.

The code below gets the video and transcript embedded and working together, but I can't figure out how to get the transcript to scroll within the frame. As it is now, by the time you get to about 1:20, the video and highlighted transcript text are too far away from each other to be on the same screen together. Also, this does not display properly unless the browser window is large enough. If the browser window is too small, the transcript disappears.

<p><iframe style="overflow: hidden;" src="https://zoom.us/rec/play/v8B5f7_9-m83G9ydtwSDCvB4W461Jqys03Id8qJfmku0AiJWZFPwM-QXZOVtOBXEOtPaww-aZnQ..." width="1200" height="10000"></iframe></p>

To see how it the non-embedded version works when played in the Zoom website, here's the url:

Jim Henderson's Zoom Meeting - Zoom 

[kmccully · Accepted solution]

Hi, Karin - 

I think I just messed around with the size until it was the best I could get for my laptop screen (probably not best for a phone or smaller screen now that I think about it, but I didn't test that!). Here's the code I used, which by the way does enable full screen viewing now. I'm not sure the transcript was ever showing actually. Maybe the overflow: hidden part does that? I'm not sure.

<iframe style="overflow: hidden;" src="https://cccconfer.zoom.us/rec/play/tcAvf-n7qTs3EtaTsQSDAfJ-W46_ffis1ScW__ULyEawUHBQNlGhZOYXYeBNs7breWuDaoom16JGWHoO" width="700" height="300" allowfullscreen="allowfullscreen"></iframe>

Good luck!

Kristin

[traciebosket]

Hi  @whitney_clay ‌ &  @hjhenderson ‌

Is that embedded inside of a Canvas Page? I want to embed a live Zoom session inside of a Canvas Pages. Any suggestions?

Tracie

[ebloomfield]

I was wondering how Zoom integrates with Canvas, in general.  Are there resources available for this?

Ellen

[gailc]

Hi Ellen - 

These links might be helpful to get you started. Note that you will need to use your Zoom admins shared secret etc not standard member info. - this is not clearly stated on the Zoom side (though I might have missed).

https://zoomappdocs.docs.stoplight.io/lti-pro-v2/welcome/getting-started
https://zoomappdocs.docs.stoplight.io/lti-pro-v2/guides/canvas

Gail

[whitney_clay]

Hi Tracie, 

Yes, the embed is inside a Canvas page. It's a recorded video rather than a live session. I want to embed the video and transcript onto a Canvas page while maintaining full functionality of the transcript.

I'm hoping somebody in the community knows how to tweak the html code to get it to work. 

Whitney

[kmccully]

Your code just worked for me! Yay! I had to edit size so the height was much smaller, but otherwise great. I don't have transcript showing, but students can turn on CC that uses it. The full-screen button doesn't work, but I have link to actual Zoom cloud as well in case they want anything additional. Thank you!

[whitney_clay]

Hi Kristin,

Thanks for letting me know. Glad to hear it was helpful for you. I like your workaround of including the direct link to the cloud recording if students want full screen or to see the transcript.

[kdyoung]

Kristin, how were you able to not have the transcript show? 

[kmccully · Accepted solution]

Hi, Karin - 

I think I just messed around with the size until it was the best I could get for my laptop screen (probably not best for a phone or smaller screen now that I think about it, but I didn't test that!). Here's the code I used, which by the way does enable full screen viewing now. I'm not sure the transcript was ever showing actually. Maybe the overflow: hidden part does that? I'm not sure.

<iframe style="overflow: hidden;" src="https://cccconfer.zoom.us/rec/play/tcAvf-n7qTs3EtaTsQSDAfJ-W46_ffis1ScW__ULyEawUHBQNlGhZOYXYeBNs7breWuDaoom16JGWHoO" width="700" height="300" allowfullscreen="allowfullscreen"></iframe>

Good luck!

Kristin

[traciebosket]

Hi  @kmccully ,

I changed the width & height. I works great with my screen, but I can't find any combinations that allows the transcript to show up on my Canvas app

<p><iframe style="overflow: hidden;" src="https://cccconfer.zoom.us/rec/play/tcAvf-n7qTs3EtaTsQSDAfJ-W46_ffis1ScW__ULyEawUHBQNlGhZOYXYeBNs7bre..." width="100%" height="500" allowfullscreen="allowfullscreen"></iframe></p>

[kmccully]

Hi - 

I didn't have the transcript showing separately, but you can click on CC and see the transcript as captions. I also provided a link to Zoom cloud in case they wanted to see the actual transcript. I'll have to play with that 100% - haven't seen that before! Good luck!

Kristin

[traciebosket]

Hmmm, interesting. I don't even see a cc button in the app. Do you see that option?

[kmccully]

I don't use the app (installing now), but the CC button is on the video from Zoom itself, so I would think that would be the same regardless. Here's a screenshot showing my video (with me!) and the Canvas around it.

[sperez52]

A better way to "hide" (since it's not really hidden if all someone has to do is resize their screen) is to share the discrete link for the shared screen with speaker view instead of the "main" link (from "Copy Shareable Link). The discrete link shares only that video/audio. The main one shares the Zoom player version, which has the running transcript.

[mgutaskus · Accepted solution]

I cannot take credit for this, but this is the embedded text I use to include transcript and have it flow with your zoom video. No overflow, it's wonderful!

<p><iframe style="overflow: hidden;" src="insert zoom video link here" width="100%" height="500" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></p>

[whitney_clay]

Mary, Thank you so much for this code! It is exactly what I was looking for. I just tried it out and it worked exactly as I had hoped--embedded Zoom video with auto-scroll transcript.

[n_boyson]

I'm new to Canvas and this is amazingly helpful! I was having trouble using Panopto, which seems easier to embed in my platform, but I am comfortable with Zoom, and this html code was just the ticket. Thank you Mary!!!

[traciebosket]

Thanks  @mgutaskus !

[DeletedUser]

Worked like a charm. Thank you so so much- my modules will be much easier to navigate!

[Nancy_Webb_CCSF]

We have found that Chrome no longer will display a Conferzoom cloud video using this iframe embed code. It still works in Firefox.  Have others seen this behavior? Opening the link in a separate tab or window still works.

If there isn't a new workaround, we will have to stop embedding using the Cloud recording share link. I hope the collective brilliance of the Canvas Community will give us a solution. Zoom is telling people to put their videos on youtube and to embed that, but it's a lot of extra work to download and then upload, set all the youtube settings...

[nalopez]

Hey Everyone

I've been using the embed link for the last year, and recently I've been receiving the following message:

"The media could not be loaded, either because the server or network failed or because the format is not supported."

I looked it up online and I saw that there may be a few issues, that I had an Ad Blocker on or that my file was deleted. I turned my ad blocker off and my files were not deleted on the Zoom cloud.  I'm not sure if any one else is having this issue? Does anyone have a work around or fix?

Thank you?

[tanysnelson]

@nalopez I am getting the same error message, too. Would like to know if anyone knows the fix.

[andy_smidt]

Me too! any update on this?