Join Joseph Labrecque for an in-depth discussion in this video Acquiring Bootstrap, jQuery, and a dark theme, part of Building Custom HTML5 Video Playback with AngularJS 1.
- One of the goals in building this video playback is to make a nicely responsive project which can adapt to all sorts of screen sizes. To accomplish this, we'll go ahead and download the latest version of Bootstrap, a popular HTML file framework which includes a number of helpful CSS definitions and other utilities to help us achieve a truly fluid layout. So the first thing we'll do is download Bootstrap from getbootstrap.com by simply clicking this button here. And once we get to the Download page we have a number of different options.
And we're gonna save this directly into our projects CSS folder and we'll give it a particular name, I'm just gonna call it darkly here and hit Save. So we see now that that has been downloaded. jQuery is something that is used extensively in modern web development and must be available on our project to use certain functionalities included within Bootstrap. Angular JS also uses jQuery, but if unavailable will fall back to its own internal JQ light functionality.
And what we'll need to do is go directly into the JS folder within our project folder and simply move that in there. And we now have all the basics for a modern responsive (mumbling) experience included within our project.
- Setting up
- Creating a video element
- Making the video element responsive
- Building controls
- Setting up an AngularJS controller
- Binding properties
- Customizing the playback controls and time display
- Enabling full-screen playback and playlist support
- Using AngularJS directives and filters