[ARCHIVED] Embedded YouTube video loses video quality

[venitk]

An instructor I work with is embedding YouTube videos in his course. He created the videos. When viewed in YouTube, the video quality is very good, but it's degraded when embedded into the course. Is there something we can do differently, or is this just how embedded YouTube videos behave in Canvas?

Edit: the video quality degrades when it goes to full size. 

[jbuchholz]

 @venitk ‌,

I found this resource before we started using Arc (which is absolutely amazing). I think this will help you as well.

See: https://developers.google.com/youtube/js_api_reference#Playback_quality

Or iframe: https://developers.google.com/youtube/iframe_api_reference#Playback_quality

• Quality level small: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
• Quality level medium: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
• Quality level large: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
• Quality level hd720: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
• Quality level hd1080: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
• Quality level highres: Player height is greater than 1080px, which means that the player's aspect ratio is greater than 1920px by 1080px.
• Quality level default: YouTube selects the appropriate playback quality. This setting effectively reverts the quality level to the default state and nullifies any previous efforts to set playback quality using the cueVideoById, loadVideoById or setPlaybackQuality functions.

Jesse

[venitk]

Thanks for the information, Jesse. I don't know enough about YouTube code to know for sure, but would player height affect the full screen video? I forgot to mention that the video quality that I'm concerned about is when it's expanded to full screen (if possible I'll edit the original question). 

[jbuchholz]

 @venitk ,

My understanding (which could be wrong) is that the default quality level stays with the embedded YouTube video. When you expand or go to full screen you are still viewing the same quality video but at a larger size.  If you switch to HTML view on the RCE when you embed the YouTube video, you should be able to change out the quality level fairly easily.

I will also do some additional digging to see if there is something I am missing.

Jesse

[venitk]

Something else odd is happening: after a few seconds (5-8 seconds), the video quality actually improves dramatically. So it's not a huge issue as long as the student can hang on, but the instructor is unhappy with the first impression the videos give. 

[Chris_Hofer]

That happens for me, too,  @venitk  ... at work and at home.  Something else you and your students could try is to click on the cog wheel at the bottom right corner of a YouTube video, and then you'll get a small window of options.  You can change the "Quality" (usually is set to "Auto") to help improve quality playback depending on one's internet speed.

[venitk · Accepted solution]

A guy in my office figured out that the solution is to force HD.

Here's Kevin: "I changed the player dimensions, as player size helps determine which stream quality you’ll get. I changed the width to 100% and height to 720. The height of 720 is what really does it. I’ve looked on Chrome, IE, Firefox, and all worked/looked ok. I also looked on Chrome for Andriod. The big height makes things look a little funny, but without the height, you can’t really force the HD stream. I was not able to look at the class in the Canvas app though."