Today I’ll begin a new category of posts on Azmind: the Quick Tutorials category. Here I’ll publish (relatively) short articles where I explain how to do a certain thing (customization, modification) with my templates, how to fix a web development problem, etc. I’ll get the tutorial ideas usually from the questions you make in the templates’ pages and also from my everyday web development work. Keep in mind that your questions will not become all tutorials and if you want quick support for the free templates, you can get it with my paid support option.
So, let’s begin with today’s quick tutorial. In the last update of the Andia Bootstrap template I added the possibility to use videos (YouTube and Vimeo) as portfolio items.
As you can see in the image below, the videos are shown as image (screenshot) thumbnails with a small icon in the top right corner of the portfolio item. When the user clicks on the thumbnail, a popup with the video is opened.
In this tutorial we’ll add another type of item: a portfolio item that uses the embedded video as thumbnail and also opens the (big) video as a popup. This time we’ll make the popup to open only when the user clicks the item’s title (for all items, so we have a homogeneous portfolio).
Take a look at the live preview at the end of the article to see what I’m talking about.
The HTML
Here is all the portfolio HTML code, with all the modifications for this version of the portfolio:
<!-- Portfolio -->
<div class="portfolio-container">
<div class="container">
<div class="row">
<div class="col-sm-12 portfolio-filters wow fadeInLeft">
<a href="#" class="filter-all active">All</a> /
<a href="#" class="filter-web-design">Web Design</a> /
<a href="#" class="filter-logo-design">Logo Design</a> /
<a href="#" class="filter-print-design">Print Design</a>
</div>
</div>
<div class="row">
<div class="col-sm-12 portfolio-masonry">
<div class="portfolio-box web-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work1.jpg" alt="" data-at2x="assets/img/portfolio/work1.jpg">
<div class="portfolio-box-text">
<h3>Lorem Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box logo-design">
<div class="portfolio-box-container portfolio-video" data-portfolio-big="http://vimeo.com/84910153?autoplay=0">
<img src="assets/img/portfolio/work2.jpg" alt="" data-at2x="assets/img/portfolio/work2.jpg">
<i class="portfolio-box-icon fa fa-play"></i>
<div class="portfolio-box-text">
<h3>Ipsum Logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box print-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work3.jpg" alt="" data-at2x="assets/img/portfolio/work3.jpg">
<div class="portfolio-box-text">
<h3>Dolor Prints</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box web-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work4.jpg" alt="" data-at2x="assets/img/portfolio/work4.jpg">
<div class="portfolio-box-text">
<h3>Sit Amet Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box logo-design">
<div class="portfolio-box-container portfolio-video" data-portfolio-big="https://www.youtube.com/watch?v=tFTLxkMmY4M">
<img src="assets/img/portfolio/work5.jpg" alt="" data-at2x="assets/img/portfolio/work5.jpg">
<i class="portfolio-box-icon fa fa-play"></i>
<div class="portfolio-box-text">
<h3>Consectetur Logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box print-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work6.jpg" alt="" data-at2x="assets/img/portfolio/work6.jpg">
<div class="portfolio-box-text">
<h3>Adipisicing Print</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box web-design">
<div class="portfolio-box-container portfolio-video" data-portfolio-big="http://vimeo.com/84910153?autoplay=0">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//player.vimeo.com/video/84910153?title=0&byline=0&portrait=0&badge=0&color=9d426b" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="portfolio-box-text">
<h3>Elit Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box print-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work8.jpg" alt="" data-at2x="assets/img/portfolio/work8.jpg">
<div class="portfolio-box-text">
<h3>Sed Do Prints</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box web-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work9.jpg" alt="" data-at2x="assets/img/portfolio/work9.jpg">
<div class="portfolio-box-text">
<h3>Eiusmod Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box logo-design">
<div class="portfolio-box-container portfolio-video" data-portfolio-big="https://www.youtube.com/watch?v=cfOa1a8hYP8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/cfOa1a8hYP8?rel=0&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="portfolio-box-text">
<h3>Tempor Logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box web-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work11.jpg" alt="" data-at2x="assets/img/portfolio/work11.jpg">
<div class="portfolio-box-text">
<h3>Incididunt Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
<div class="portfolio-box print-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work12.jpg" alt="" data-at2x="assets/img/portfolio/work12.jpg">
<div class="portfolio-box-text">
<h3>Ut Labore Print</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Portfolio Image Item
Here is the HTML of an image portfolio item. The “data-at2x” attribute is used from the “retina.js” plugin. We’ll talk about it in another tutorial.
<div class="portfolio-box web-design">
<div class="portfolio-box-container">
<img src="assets/img/portfolio/work1.jpg" alt="" data-at2x="assets/img/portfolio/work1.jpg">
<div class="portfolio-box-text">
<h3>Lorem Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
Portfolio Video Item with Image Thumbnail
Here is the HTML of a portfolio video item that uses an image (screenshot) as thumbnail. As you can see, we add the class “portfolio-video” to the “portfolio-box-container” div. This will tell the popup that we have a video element.
Also we’ve added the attribute “data-portfolio-big” to put the video URL. In the “i” tag we have the small icon.
<div class="portfolio-box logo-design">
<div class="portfolio-box-container portfolio-video" data-portfolio-big="http://vimeo.com/84910153?autoplay=0">
<img src="assets/img/portfolio/work2.jpg" alt="" data-at2x="assets/img/portfolio/work2.jpg">
<i class="portfolio-box-icon fa fa-play"></i>
<div class="portfolio-box-text">
<h3>Ipsum Logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
Portfolio Video Item with Embedded Video as Thumbnail
In this case we use the “portfolio-video” class and “data-portfolio-big” attribute, as above. But we don’t want an image as thumbnail! Instead we use the Bootstrap Responsive Embed for an iframe embedded video thumbnail.
<div class="portfolio-box logo-design">
<div class="portfolio-box-container portfolio-video" data-portfolio-big="https://www.youtube.com/watch?v=cfOa1a8hYP8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/cfOa1a8hYP8?rel=0&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="portfolio-box-text">
<h3>Tempor Logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
The CSS
Using the Bootstrap Responsive Embed is really easy. But we have to make sure that the video thumbnails have the same height as the image thumbnails. For this we play a bit with CSS until we find the right value of the padding:
.portfolio-box-container .embed-responsive.embed-responsive-16by9 {
padding-bottom: 48%;
}
We also add the code below to make the item titles look like links (the three points mean the code continues):
.portfolio-box-text h3 {
cursor: pointer;
...
The JavaScript
Now we have to make the popup slider work. It must open when the user clicks on the titles of the portfolio items!
In this template I have used the Magnific Popup jQuery plugin. Below you can see the code (you can see all the custom JavaScript code of this template in the “scripts.js” file). For a better understanding of this plugin I suggest you read the documentation.
$('.portfolio-box h3').magnificPopup({
type: 'image',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image could not be loaded.',
titleSrc: function(item) {
return item.el.text();
}
},
callbacks: {
elementParse: function(item) {
var box_container = item.el.parents('.portfolio-box-container');
if(box_container.hasClass('portfolio-video')) {
item.type = 'iframe';
item.src = box_container.data('portfolio-big');
}
else {
item.type = 'image';
item.src = box_container.find('img').attr('src');
}
}
}
});
Conclusion
You can see a live preview of this version of the portfolio from the link below. If you like it you can download and use it. Also, I might include it in an official version of the template in the future. However, I think the previous solution (with image thumbnails) is lighter!
Preview and Download
DOWNLOAD: Andia - Embedded video as portfolio item thumbnail (2354 downloads )
Stay Updated
Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:
To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.
I follow your tutorial and make “Portfolio Video Item with Image Thumbnail”. But when I click video show in a black screen and auto download video. How can I watch it online. I had try use IE, Chrome, Firefox