From the course: Learning Responsive Media
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Flexible video embedding
Now that we put video into our pages, we will make it flexible to work in tandem with responsive elements in our page. Also, we want to make sure any videos that we embed from sources like YouTube or Vimeo, for example can be flexible as well. In order to do that I want to place an HTML element container around the videos and then use CSS rules to make that flexible. Why container? Well, it allows me to contain the video of source, whether that's native video or embedded video from a third party. If I have a container, it's easier for me to associate CSS rules or hook in JavaScript functions if needed on the videos. So here, we have a typical native video element, nothing too surprising. Next, we wrap a div element around the video and set a class attribute to that of video-container. Next we tell the browser to increase the video to a width of 100%. But we keep it contained by making sure the container element doesn't blow out our layout by stretching it too much. So we set the video…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.