jQuery when selector hovered play specific videos from start

Question

I've recently had help with problem on here which is great but I've hit another issue.

How can I make a relevant video play from the beginning when you hover over the relevant selector (button), if it isn't already active?

At the moment with my code all videos just play and loop continuously and never starts from the biggining when you display that video.

body {
    background:grey;
}
#terrace-fw-wrap {
    display:block; 
    width:100%;
    min-width:660px;
    margin: auto;
    text-align: center;
}

#terrace-fw-wrap .content {
    display:block; 
    width:100%;
}

.video-text {
    width: 30%;
    min-width:300px;
    max-width: 400px;
    padding: 20px;
    color:white;
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: left;
}

#terrace-fw-wrap .content .video {
    display:none; 
    width:100%;
}

.active-video {
    display:block !important; 
    width:100% !important;
}

#terrace-fw-wrap .buttons .but {
    display:inline-block; 
    width:150px;
    padding:10px;
    margin:10px;
    text-align: center;
    color:black;
    background:white;

}

#terrace-fw-wrap .buttons .but:hover {
    color:white;
    background:black;
    cursor: pointer;
}

.active-but {
    color:white !important;
    background:black !important;

}

video {
    width:100%;
}


    
        
            
                TEST TEXT 1
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris orci libero, consequat nec eros nec, hendrerit tristique lorem. Curabitur scelerisque egestas orci, at viverra quam tempor at. Donec aliquam malesuada enim nec euismod. Aliquam dignissim, tortor ac consequat dictum, odio mauris semper elit, ut rhoncus eros nibh sit amet ex. Suspendisse aliquet arcu eu nunc condimentum tristique. Etiam at ex eget diam fringilla finibus in ut quam. Cras eu ultricies purus. Suspendisse potenti. Vivamus in vehicula tellus. 
            
            
        
        
            
                TEST TEXT 2
                Vivamus eu eleifend lacus, vitae convallis lectus. Quisque efficitur nibh in ligula lobortis, at congue dolor eleifend. Aenean luctus vel magna id varius. Curabitur maximus magna id eleifend vulputate. Nam facilisis pharetra diam in consequat. Sed metus neque, semper id eros id, blandit ornare sem. In sed massa blandit, scelerisque felis a, tristique lorem. Pellentesque id mauris a felis faucibus cursus ut ut elit. Maecenas malesuada velit et ipsum facilisis sagittis. Cras facilisis accumsan commodo. Nulla eu ultrices justo.
            
            
        
        
            
                TEST TEXT 3
                Donec auctor vel nisl vel feugiat. Donec imperdiet neque tortor, sit amet rhoncus diam elementum eu. Vestibulum ullamcorper leo ac eros consequat posuere. Integer sit amet scelerisque odio, vitae pulvinar massa. Mauris faucibus auctor ultrices. Nam iaculis imperdiet ullamcorper. Phasellus sit amet mauris quam. Quisque vitae pulvinar ante, at fringilla tellus. Sed venenatis velit quis efficitur auctor. Proin varius sit amet quam sit amet luctus.
            
            
        
        
            
                TEST TEXT 4
                Mauris sed consequat turpis, nec placerat erat. Nullam vehicula, metus id tincidunt dapibus, odio mauris maximus mauris, eget elementum sem nulla auctor magna. Aliquam blandit molestie magna et pellentesque. Quisque vestibulum venenatis feugiat. Donec vel leo et justo fermentum viverra nec in dolor. Etiam vitae venenatis nibh. Nulla nec ornare lorem, ac lacinia metus. Maecenas eget fringilla orci.
            
            
        
        
            
                TEST TEXT 5
                Maecenas viverra mi nisl, vitae porta turpis vehicula nec. Donec vel tellus finibus, tincidunt nisl et, ultricies nunc. Mauris at est mollis neque laoreet efficitur non quis quam. Donec at sodales est, quis gravida leo. Pellentesque eu nulla vehicula, consectetur sem sodales, ullamcorper dolor. Donec vitae leo lacus.
            
            
        
        
            
                TEST TEXT 6
                Ut neque libero, convallis ac condimentum ac, rhoncus eget lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi vitae risus eros. Nunc ullamcorper mi neque, sit amet sollicitudin libero malesuada in. Nulla sodales eros vitae tortor sodales, vitae condimentum mauris scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit sodales magna in venenatis. 
            
            
        
    
    
        
            Button 1
        
        
            Button 2
        
        
            Button 3
        
        
            Button 4
        
        
            Button 5
        
        
            Button 6

$(function(){
    $('.but').hover(function() {
        $('.but').removeClass('active-but');
        $(this).addClass('active-but');
        $('.video').removeClass('active-video');
        $('#' + $(this).attr('data-image')).addClass('active-video');
    });
});

jsfiddle: https://jsfiddle.net/sLeqjhxh/

Thanks

tylerism · Accepted Answer

Here is a working solution using currentTime to reset the video as well as video pause and play functions

https://jsfiddle.net/sLeqjhxh/4/

$(function(){
    $('.but').hover(function() {
         if($(this).hasClass('active-but')){
            return;
         }
         $('.but').removeClass('active-but');
         $(this).addClass('active-but');
         $('.active-video video')[0].pause(); 
         $('.active-video video')[0].currentTime = 0;         
         $('.video').removeClass('active-video');
         $('#'+ $(this).attr('data-image')).addClass('active-video');
         $('#'+ $(this).attr('data-image') + ' video')[0].play();
     });
 });

EDIT: I added a conditional that just returns if the button is already active :)

jQuery when selector hovered play specific videos from start

Answers (2)

Related Questions