CODEWITHSUNDEEP
htmlcssvideo
hj8ag
hj8ag

Reputation: 305

Video DIV background on :hover

I'm currently trying to create a site where a grid of thumbnails is loaded into a page and when a user (on desktop) hovers over a selected thumbnail, a small video plays in the background of the DIV.

At the moment my CSS is looking something like this:

.griditem {
    position: relative;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    width: 50%;
    overflow: hidden;
    max-width: 690px;
    min-width: 360px;
}

.video {
    position: relative;
    margin-top: none;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

.overlay {

    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
}


.titles {
    display: table;
    width: 100%;
    height: 100%; /*important, forces to 100% height of parent*/
    opacity:0;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .25s ease;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-decoration: none;

}


.titles p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 25px;
    font-family: helvetica;
}

.griditem:hover .titles {
    text-decoration: none;
    opacity:1;
}

.imgspacer {
    width:100%;
}

.griditem:hover .video {
    display: inline;
}

.griditem:hover .imgspacer {
    display: none;
}

and my HTML

<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<div class="imgspacer"><img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" /></div>
            <div class="video">
            <video id="video" preload="none" muted autoplay loop poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%">
          <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
          <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
          <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
          <p>Your browser does not support HTML5 Video!</p>
            </video>
              </div>
    <div class="overlay">
    <a href="http://www.google.com" class="titles">
     <p>BIG TEXT<br>
        small Title<p>
    </a>
   </div>
</div>

This seems to be working pretty well at the moment, but I'm wondering if it's possible to get the video to always start at the beginning (reset basically) when the .griditem:hover is triggered?

Also I've used display:none on the video DIV - does this mean all of the videos are being loaded in the background and are in effect 'playing?' - I'm worried about potential performance impacts when displaying lots of video as well as data usage! Is there a better way of doing this?

Here is a link to a fiddle of this: http://jsfiddle.net/jameshenry/0wo79wva/1/

Upvotes: 3

Views: 3638

Answers (1)

hj8ag
hj8ag

Reputation: 305

Solved thanks to the help of @somethinghere and @Shikkediel and the following Javascript

$(document).ready(function() {
    $('.overlay').mouseout(function() {
    $('#testvideo').get(0).currentTime = 0;
    });
});

Upvotes: 3

Related Questions