Casa Curator - Interior Design Blog

CasaCurator

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 Slick, and the Vide jQuery plugin to create the video background in the carousel. The videos are from Coverr, and were further optimized using Handbrake..

In the first itteration of the project, the videos were played via a JavaScript function using an array and event handlers to create a "playlist" which populated the <src> section of the <video> tag. These videos were actually behind the carousel, 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 iddue that arose with this method was a white flash 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. that af Ideally

Details and Code Snippets

The carousel divs are structured like so:

<div class="surround" id="m2">
<div class="articlebox">
<div class="articlecontainer">
<h2>Vacation Home Vibes</h2>
<a href="#vibes">
<p class="readbtn">Read Article</p>
</a>
</div>
</div>
</div>

  • .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 .surround
  • .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.

Since the videos would not play within the carousel, underneath the entire Slick slider div is the video background contained inside the "opening" div:

<div id="opening">
<div id="videoBlock" class="fader video-container">
<video id="vid" preload="auto"></video>
</div>

As you can see, no video source is specified here, just an id. I used a JavaScript array to insert the video source into the video tag, and an event handler to load and play the series of videos:


		window.onload = function(e) {

  var videoSource = new Array();
  videoSource[0] = 'video/Handyman.mp4#t=5';
  videoSource[1] = 'video/Home.mp4#t=7';
  videoSource[2] = 'video/Chandelier.mp4#t=4';
  videoSource[3] = 'video/Fresh-Paint.mp4#t=5';
  videoSource[4] = 'video/Fresh-Paint.mp4#t=5';

  var poster = new Array();
  poster[0] = 'video/Handyman.jpg';
  poster[1] = 'video/Home.jpg';
  poster[2] = 'video/Chandelier.jpg';
  poster[3] = 'video/Fresh-Paint.jpg';
  poster[4] = 'video/Fresh-Paint.jpg';

  var i = 0;
  var videoCount = videoSource.length;

  function videoPlay(videoNum) {
    document.getElementById("vid").setAttribute("src", videoSource[
      videoNum], "poster", poster[videoNum]);
    document.getElementById("vid").load();
    document.getElementById("vid").play();
  }
  document.getElementById('vid').addEventListener('ended', myHandler,
    false);

  videoPlay(0);

  function myHandler() {
    i++;
    if (i == (videoCount - 1)) {
      i = 0;
      videoPlay(i);
    } else {
      videoPlay(i);
    }
  }
}
.style

Details and Code Snippets

Retro Palm Springs

Photo of Del Marcos Hotel

About the project

More Hotels...

Dobbin Steet Custom Bicycles

Photo of Tramway Gas Station

about

More Mid-Century Structures...