Video background on Category Page
This nice enhancement is based on the Humble Squid theme.
See live example at:
https://moderatortal.zendesk.com/hc/en-us
This enhancement is based on the VideoBG plugin by Syd Lawrence:
http://syddev.com/jquery.videoBG/
To make it work, you will need:
Video files in multiple formats (webm, mp3, ogv).
Poster image - which should be the 1st frame of the video.
The plugin file (jquery.videoBG.js) from the site above.
Steps:
1. Add the video files, poster image, and .js file as assets to your theme.
2. Add the following script to the Document head page
<script src="{{asset 'jquery.videoBG.js'}}"/>
3. Add the following script to the Category page:
<script>
$(document).ready(function(){
$('.section-tree').css('min-height','500px')
$('.section-tree').css('background-color','rgba(0,0,0,0)')
$('div.section-tree').videoBG({
webm: '{{asset '720.webm'}}',
mp4: '{{asset '720.mp4'}}',
poster: '{{asset 'category_video_poster.png'}}',
scale: true,
autoplay: true,
loop: true,
zIndex: 0
});
})
</script>
Replace the asset names as needed.
-
Tal, you're awesome! :D
-
Love it. Thanks, Tal!
Vous devez vous connecter pour laisser un commentaire.
2 Commentaires