Casa Curator - Interior Design Blog
The requirement for this project was to create a responsive blog site, and include a video using the HTML5
<video> tag. I did not want to simply satisfy the minimum requirements and just throw a video on a page. I wanted to take it a few steps further by using several "hero" videos within the carousel which could highlight popular or new articles.
For the carousel, I used jQuery plugin Slick , and the Vide jQuery plugin to create the video background within the carousel. The videos are from Coverr, and were further optimized using Handbrake. I also used an animated gif version of the videos as the posters in order to still have the video play on mobile devices.
<src> section of the
<video> tag. These videos were actually behind the carousel and running independent of it, which I found was a clunky way to do it, and the videos did not always sync up with the article card that was being displayed over it. Another issue that arose with this method was that the transition between videos was not seamless - a white flash occurred in between videos on slower systems. As a workaround for this, I added a
.fader class to my .surround div in the carousel, which gave it a white background and used another JS function to fade the opacity from 0 to 1 every 10 seconds to cover the the raw transition between videos.
Once I implemented Vide, these issues were fixed.
The carousel divs are structured like so:
<div class="surround" id="m2">
<h2>Vacation Home Vibes</h2>
<p class="readbtn">Read Article</p>
.surround: sets the height and width, and sets the overflow to hidden.
.articlebox: sets the size, location, and transparency of the whole "card" within the
.articlecontainer: contains the text and provides the gold border
.readbtn: styles a
<p>tag link to the article as a button
Font size is set by the
<h2> within the
.articlecontainer div. The id only comes into play as a fallback for small mobile screens where it's just not practical to play videos. Instead of the video, a gif version of the video is used as the background of the "surround" div.