Adding videos to your website

 Feb 16, 2016

Often when we are creating websites we are advertising a service or products and a good way to illustrate the products or services in question is through the use of media. This media can include things like a photo and video library showcasing it all. When we include media in our site we want to have it engaging and easy to work with, usually without going away from the site itself. Lucky for us we have JavaScript libraries that can assist us with this. So for today’s blog I will be taking you through the steps of using the “Magnific Popup” JS library to create a rich media website. The following images show the end product. Add videos to website And when you click on a video it appears in its own window as seen in the following image:
Add videos to website
For this to work we are going to use the Bootstrap and magnific popup libraries, these libraries can be inserted into your project by searching for them using NuGet package manager.
Add videos to website Add videos to website
Once these are added you can add an empty page or edit the page of interest. To use these libraries make sure you reference them within the HTML page. Within these references we will include Bootstrap, jQuery and magnific popup libraries as well as the associated stylesheets.
Add videos to website
Next we will add some HTML markup to represent our gallery of videos. Take note that I will also add some CSS rules to style these items for the sake of appearances. When we take a closer look at the items within the markup you can see the following:
  • It has an anchor element as the parent element
  • The anchor tag has a class set to “popup-youtube”
  • It has an img element nested to display the thumbnail of the video
  • Finally a h5 element for a title of the video
It is handy to use an anchor tag as it provides a point of contact for the user, it is also important to assign the class of “popup-youtube” as this will be used by a piece of JavaScript code to open the video
Add videos to website
The following is the markup of the CSS, remember to include this on your html page
Add videos to website
Finally we need to add the JavaScript code to make sure my users get to see the video in a modal dialog. If we take a look at the script it includes the following:
  • Will fire of when the document is ready
  • It targets elements with the “.popup-youtube” class assigned to them
  • Will render an Iframe
  • Uses a class called “mfp-fade”, this is included in the magnific stylesheet

  • Add videos to website

    How do your Excel skills stack up?   

    Test Now  

    About the Author:

    Auret Swanepoel  

    As a recent addition to the New Horizons team, Auret is a highly skilled and qualified IT Technical trainer. He has been a Microsoft Certified Trainer (MCT) since 2008 and has since then, also become a Microsoft Certified Professional (MCP), a Microsoft Certified Technology Specialist (MCTS) and a Microsoft Certified Information Technology Professional (MCITP). With his international experience as a trainer in South Africa, Auret is able to adapt his teaching style to different audiences in the classroom and ensure that students are learning in a positive and collaborative environment.

    Read full bio
    Back to top