Last active
May 9, 2017 23:33
-
-
Save srikat/9579676 to your computer and use it in GitHub Desktop.
Video background in Genesis using jQuery. http://sridharkatakam.com/video-background-genesis-using-jquery/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Remove the site description | |
| remove_action( 'genesis_site_description', 'genesis_seo_site_description' ); | |
| //* Enqueue jQuery - Background video | |
| add_action( 'wp_enqueue_scripts', 'enqueue_html5_background_video' ); | |
| function enqueue_html5_background_video() { | |
| if ( (is_home() || is_front_page()) && !wp_is_mobile() ) { | |
| wp_enqueue_script( 'backgroundvideo', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backgroundvideo.min.js', array( 'jquery' ), '', true ); | |
| wp_enqueue_script( 'backgroundvideo-init', get_stylesheet_directory_uri() . '/js/jquery.backgroundvideo.init.js', array( 'backgroundvideo' ), '1.0.0', true ); | |
| } | |
| } | |
| add_action( 'genesis_after_header', 'sk_bkgrd_video' ); | |
| function sk_bkgrd_video() { | |
| if ( is_home() || is_front_page() ) { | |
| echo '<div class="bg-video"> | |
| <div class="wrap"> | |
| <div class="video-caption"> | |
| <div class="video-headline">This is your main Headline</div> | |
| <div class="video-tagline">This is the your tagline. Nulla egestas dapibus metus, sed vestibulum nisl scelerisque sed.</div> | |
| </div> | |
| </div> | |
| </div>'; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a img { | |
| margin-bottom: 0; | |
| } | |
| .site-title { | |
| margin-bottom: 0; | |
| } | |
| .site-header .wrap { | |
| padding: 0; | |
| } | |
| .nav-header a { | |
| padding: 1.8rem 2.4rem; | |
| } | |
| .bg-video .wrap { | |
| text-align: center; | |
| } | |
| .bg-video .video-caption { | |
| text-align: center; | |
| color: #fff; | |
| padding: 200px 0; | |
| } | |
| .bg-video .video-caption .video-headline { | |
| font-size: 34px; | |
| text-shadow: 3px 3px rgba(0, 0, 0, 0.1); | |
| font-weight: bold; | |
| } | |
| .bg-video .video-caption .video-tagline { | |
| font-size: 28px; | |
| } | |
| .bg-video .video-tagline a { | |
| border-bottom: 1px dotted #fff; | |
| color: #fff; | |
| } | |
| @media only screen and (max-width: 1024px) { | |
| .bg-video { | |
| background: url('media/video/cloud.jpg') no-repeat center center; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (min-width: 1025px) { | |
| .home .site-inner { | |
| max-width: none; | |
| background: #f5f5f5; | |
| } | |
| .home .content-sidebar-wrap { | |
| max-width: 1140px; | |
| margin: 0 auto; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Remove the site description | |
| remove_action( 'genesis_site_description', 'genesis_seo_site_description' ); | |
| //* Load site-wide js. In this case, it has the code to slide the header away when scrolling down and fade it in when scrolling up | |
| add_action( 'wp_enqueue_scripts', 'sk_site_wide_scripts' ); | |
| function sk_site_wide_scripts() { | |
| wp_enqueue_style( 'dashicons' ); | |
| wp_enqueue_script( 'main', get_stylesheet_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true ); | |
| } | |
| //* Enqueue jQuery - Background video | |
| add_action( 'wp_enqueue_scripts', 'enqueue_html5_background_video' ); | |
| function enqueue_html5_background_video() { | |
| if ( (is_home() || is_front_page()) && !wp_is_mobile() ) { | |
| wp_enqueue_script( 'backgroundvideo', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backgroundvideo.min.js', array( 'jquery' ), '', true ); | |
| wp_enqueue_script( 'backgroundvideo-init', get_stylesheet_directory_uri() . '/js/jquery.backgroundvideo.init.js', array( 'backgroundvideo' ), '1.0.0', true ); | |
| // for smooth scrolling when the down arrow is clicked | |
| wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '', true ); | |
| wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '', true ); | |
| // for setting the height of Background Video section equal to that of viewport, adding the down arrow, and setting smooth scrolling speed | |
| wp_enqueue_script( 'home', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery', 'localScroll' ), '1.0.0', true ); | |
| } | |
| } | |
| add_action( 'genesis_after_header', 'sk_bkgrd_video' ); | |
| function sk_bkgrd_video() { | |
| if ( is_home() || is_front_page() ) { | |
| echo '<div class="bg-video"> | |
| <div class="wrap"> | |
| <div class="video-caption"> | |
| <div class="video-headline">This is your main Headline</div> | |
| <div class="video-tagline">This is the your tagline. Nulla egestas dapibus metus, sed vestibulum nisl scelerisque sed.</div> | |
| </div> | |
| </div> | |
| </div>'; | |
| } | |
| } | |
| //* Add a ID to .site-inner on homepage | |
| add_filter( 'genesis_attr_site-inner', 'custom_attributes_content' ); | |
| function custom_attributes_content( $attributes ) { | |
| if ( is_home() || is_front_page() ) { | |
| $attributes['id'] = 'site-inner'; | |
| } | |
| return $attributes; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a img { | |
| margin-bottom: 0; | |
| } | |
| .site-title { | |
| margin-bottom: 0; | |
| } | |
| .site-header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 99; | |
| } | |
| .admin-bar .site-header { | |
| top: 32px; | |
| } | |
| .site-header + .site-inner { | |
| padding-top: 100px; | |
| } | |
| .site-header .wrap { | |
| padding: 0; | |
| } | |
| .nav-header a { | |
| padding: 1.8rem 2.4rem; | |
| } | |
| .bg-video { | |
| position: relative; | |
| } | |
| .bg-video .wrap { | |
| text-align: center; | |
| display: table; | |
| } | |
| .bg-video .video-caption { | |
| display: table-cell; | |
| vertical-align: middle; | |
| color: #fff; | |
| } | |
| .bg-video .video-caption .video-headline { | |
| font-size: 34px; | |
| text-shadow: 3px 3px rgba(0, 0, 0, 0.1); | |
| font-weight: bold; | |
| } | |
| .bg-video .video-caption .video-tagline { | |
| font-size: 28px; | |
| } | |
| .bg-video .video-tagline a { | |
| border-bottom: 1px dotted #fff; | |
| color: #fff; | |
| } | |
| .arrow { | |
| margin: 0; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .arrow a { | |
| background: rgba(0, 0, 0, 0.6); | |
| border-radius: 30px; | |
| display: inline-block; | |
| padding: 13px 10px 6px; | |
| text-align: center; | |
| line-height: 1; | |
| position: absolute; | |
| bottom: 30px; | |
| left: 50%; | |
| } | |
| .arrow a:before { | |
| -webkit-font-smoothing: antialiased; | |
| color: rgba(255, 255, 255, 0.8); | |
| content: "\f347"; | |
| font: normal 25px/1 'dashicons'; | |
| height: 40px; | |
| width: 40px; | |
| } | |
| .arrow a:focus { | |
| outline: none; | |
| } | |
| @media only screen and (min-width: 1025px) { | |
| .home .site-inner { | |
| max-width: none; | |
| background: #f5f5f5; | |
| } | |
| .home .content-sidebar-wrap { | |
| max-width: 1140px; | |
| margin: 0 auto; | |
| } | |
| } | |
| @media only screen and (max-width: 1024px) { | |
| .bg-video { | |
| background: url('media/video/cloud.jpg') no-repeat center center; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function( $ ){ | |
| $('.bg-video .wrap') .css({'height': (($(window).height()))+'px'}); | |
| $(window).resize(function(){ | |
| $('.bg-video .wrap') .css({'height': (($(window).height()))+'px'}); | |
| }); | |
| $(".video-caption .video-tagline").after('<p class="arrow"><a href="#site-inner"></a></p>'); | |
| $.localScroll({ | |
| duration: 750 | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function( $ ){ | |
| var videobackground = new $.backgroundVideo($('.bg-video'), { | |
| "align": "centerXY", | |
| "width": 1280, | |
| "height": 720, | |
| "path": "http://genesis.dev/wp-content/themes/genesis-sample/media/video/", | |
| "filename": "cloud", | |
| "types": ["mp4","ogg","webm"] | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function( $ ){ | |
| $(window).scroll(function () { | |
| var yPos = ( $(window).scrollTop() ); | |
| if( yPos > 75 ) { // fade out fixed header after 75 pixels have been scrolled down from the top | |
| $(".site-header").slideUp(); | |
| } else { | |
| $(".site-header").fadeIn(); | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment