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. And when you click on a video it appears in its own window as seen in the following image:

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.

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.

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

The following is the markup of the CSS, remember to include this on your html page

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