The Code ?īoth have you wrapping a parent html with either.
Luckily, there's a pretty easy fix that Bootstrap documents. If you're like me, anytime I encounter stuff like this, it causes me an infinite amount of strife. The fixed width was extending off the screen to the right. But, it was screwy on mobile when I previewed the live site on my iPhone 11. This worked fine, and previewed well on localhost:5500. I found this out just this morning when adding a tutorial video to a simple web app I made using Bootstrap 5. 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.It comes close, but if you copy and paste the embed code off of a YouTube video, you can still run into issues. Along the way, I have picked up additional skills that have helped me to achieve this. Over the last eight years, I have worked to better my understanding of web and graphic design. To develop a central repository of these videos, and other content, I taught myself to code in HTML and CSS. The problem then was disseminating the information to students, and not just those in my classes. To address this, I set to work filming video lectures and reviews and posting them to YouTube. I recognized early on in during my tenure that students across our campuses needed a consistent lab experience. Initially, I was lab staff, and prepped and taught biology labs. I attended MIT, where I obtained a BS in Biology, and then received a MS in Cell and Molecular Biology from UPenn.Īfter 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. I'm a Texan, born and raised, though I spent all of my years in college and graduate school in the northeast. 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! 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. You can view and resize the container itself on my jsfiddle account here. The resulting code for the video looks like 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. I found the following gist by GitHub user jaicab which detailed a pure CSS method for handling this. While javascript is an obvious choice for resizing elements, the solution for this issue was actually much easier than I realized. 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. 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. The end result is a video container that is either too narrow or too wide depending on the device that you choose to use. 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.Īdditionally, simply copying the embed code of a YouTube video gives you set dimensions for the iframe that you drop into your page. Dropping a video into a course and having it simply represented by a small thumbnail just bothers me. 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.