Embedding a YouTube Player with Responsive Aspect Ratio

Community Member
19 8 5,244

The Challenge

Canvas does a pretty good job of handling responsive design via the Rich Content Editor, but, if there is one thing that I have found I am not the biggest fan of, it is the video thumbnails. Dropping a video into a course and having it simply represented by a small thumbnail just bothers me. I know that I can just link to a YouTube video as an External Tool in a module as well, but I want to include buttons, links, and text in the pages to accompany my videos.

Additionally, simply copying the embed code of a YouTube video gives you set dimensions for the iframe that you drop into your page. The end result is a video container that is either too narrow or too wide depending on the device that you choose to use. Furthermore, while I could have easily set the width of the video container to 100%, making it fluidly adjust to the width of the page, the iframe's height would remain he same, which would give me black, spacing bars on either side of the video.

What I really wanted was to be able to embed my YouTube videos on a page so that I could also enable custom thumbnails for the videos and maintain their aspect ratio no matter the device that was used to view them.

Solution

While javascript is an obvious choice for resizing elements, the solution for this issue was actually much easier than I realized. I found the following gist by GitHub user jaicab which detailed a pure CSS method for handling this. Recognizing that I didn't have access to the global CSS for my organization's instance of Canvas, I instead chose to utilize his CSS inline with the paragraph element in Canvas, and the iframe element that is generated for the purposes of embedding YouTube videos. The resulting code for the video looks like this:

<p style="border: 1px solid #d7d7d7; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none" src="https://www.youtube.com/embed/xcdzCwuFmCs?showinfo=0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe>
</p>‍‍‍‍‍‍

You can view and resize the container itself on my jsfiddle account here. Another reason that I like to use the embeddable iframe element is that it also allows me to utilize additional video parameters that YouTube has available including video start/end times, modest branding, and autoplay.

If you would like to test it out using any other YouTube video, simply replace my iframe src parameter with the src parameter from the embed code of your video of choice!

8 Comments
Community Member

This sounds really great, msgarcia‌! Thanks for sharing here! I will test it out this weekend. Much appreciated! 🙂

Community Member

Thank you! Please let me know if you have any questions.

Explorer

Hi msgarcia 

Great little adaptation, and it works nicely.

Have you considered participating in https://community.canvaslms.com/message/7260-canvashacks-classroom?sr=search&searchId=fbd4938c-90ca-...‌? Instructure was nice enough to give us a classroom space where we can share these great little hacks.  If you want to be enrolled in the classroom, just shoot me a DM with your email address, and I will hook you up.

Kelley

Community Member

Thank you msgarcia! This is exactly the kind of resource I love finding here!

Community Member

Thanks for sharing this, msgarcia‌! Stumbled over your post after finding that the normal code I'd use for this wasn't "taking" in Canvas, and the video looks great on my laptop.

One question for you: what do your videos look like when you're opening them up in the Canvas app? I ask because I'm finding that when I resize my browser screen, or open up the page w/ videos in the app, the video stops resizing at right about 450px. (AKA not a good mobile experience!) Have you found this is an issue for you as well? If not I'll fiddle with my code a bit more, but given the wonkiness of video embeds when it comes to responsiveness, I'm wondering if I should just settle for those disappointing thumbnails. (Same as you, I'm not the biggest fan of thumbnails.)

And, thank you again for sharing your code! 

Community Member

Thanks for the feedback Ellen. A couple of questions/points of consideration before we start to diagnose the problem:

  1. Browsers won't render the content smaller than ~450px because the page container <div> or whatever it is in the Canvas html is set to have a min-width of about 450px.
  2. Are you using iOS or Android for the app?
  3. On iOS, I am not encountering the issue, and here is what one of my pages that I deployed this container into looks like:iOS screenshot of Canvas Mobile App

Let me know if we need to set up some kind of teleconference, or touch base via email to sort things out and get you up and running. I will continue to test out my code and make sure that there weren't significant changes made that may have affected it. If there were, then I will be sure to modify/update it.

Community Member

Thanks for the super quick response, msgarcia! I had been on the verge of shrugging this off as just an oddity of video embeds, but after your response jumped back into my code and realized it might be acting odd because I had *also* been playing with a table layout in the same page. (Reminder to self: do one thing at a time.) Pulled the video code out of the table and now it's working perfectly in iOS. So, your code is good, and thank you again!

Community Member

Happy I could help Ellen! Also, as a side note, if you are interested in doing a bit more with iframes or any other responsive kind of element, be sure to check out my other blog posts as well:

https://community.canvaslms.com/groups/designers/blog/2017/06/14/embed-a-viewable-360-in-the-rce?sr=...

https://community.canvaslms.com/groups/designers/blog/2017/06/20/embedding-an-html-page-in-an-iframe...

https://community.canvaslms.com/groups/cmug/blog/2017/06/06/verifying-mobile-friendly-web-content?sr...

Cheers!

About the Author
I'm a Texan, born and raised, though I spent all of my years in college and graduate school in the northeast. I attended MIT, where I obtained a BS in Biology, and then received a MS in Cell and Molecular Biology from UPenn. After leaving the northeast, I moved back to the Dallas area to be a bit closer to my family, and landed a job at Collin College. Initially, I was lab staff, and prepped and taught biology labs. I recognized early on in during my tenure that students across our campuses needed a consistent lab experience. To address this, I set to work filming video lectures and reviews and posting them to YouTube. The problem then was disseminating the information to students, and not just those in my classes. To develop a central repository of these videos, and other content, I taught myself to code in HTML and CSS. Over the last eight years, I have worked to better my understanding of web and graphic design. Along the way, I have picked up additional skills that have helped me to achieve this. Now, as I work on new strategic initiatives and projects, I do so with very distinct objectives: create functional, student facing assets, AND, ensure that those assets are clean, concise and well designed.