Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro: Video in Home Section 1 Widget Area?
- This topic has 6 replies, 2 voices, and was last updated 9 years, 8 months ago by
scaramia.
-
AuthorPosts
-
August 15, 2015 at 1:18 pm #162472
scaramia
MemberHas anyone done this?
I want a video filling the background of the first Home Section Widget Area of Parallax Pro. instead of an image . This was asked about a year ago, but not answered. There are tons of video insertion plugins, but how do you do it in this theme?
Thanks!
http:// http://bayareandw.org/new/August 16, 2015 at 8:52 am #162511Victor Font
ModeratorYou can manually add a video through the home-section-1 css background. You need to be aware of a potential problem however. I have a video in the foreground in a site I'm building with parallax pro. The video runs constantly even when it's not displayed on the screen. As a result, as I was testing the feature in various browsers, my MacBook Pro fans kicked into high gear and my system memory was getting chewed up. The problem occurred only when I was testing in Chrome and Safari. As a result, I had to develop a way to pause the video when it wasn't in the active viewport so system resources weren't getting used up. I suspect you'll be having some fun with this.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 25, 2015 at 2:47 pm #163478scaramia
MemberHi Victor,
I've successfully added the video using the BigVideo method:
How to replace Home Section 1’s Parallax Image Background with Video Background using BigVideo.js
Works great, but for some reason it still loops, even though I've set a background image as directed. Also, in FF, there's copy that flashed on the left. (I've asked Sridhar, but no response...)
Any ideas?
Thanks!
Steve
August 26, 2015 at 5:23 am #163549Victor Font
ModeratorYes. Videos will continue to loop unless you get creative. Maybe this will help: http://victorfont.com/pause-html5-video-when-out-of-viewport/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 26, 2015 at 11:33 am #163590scaramia
MemberThanks Victor. After I copied the
isInViewport.js
into my child's js folder, I copied your code into it's functions.php file and got the following error. ??? Thanks for any help -- !Parse error: syntax error, unexpected '$', expecting '&' or T_VARIABLE in /home/bacndwo/public_html/new/wp-content/themes/parallax-pro/functions.php on line 156
Here's the full file:
<?php //* Start the engine include_once( get_template_directory() . '/lib/init.php' ); //* Setup Theme include_once( get_stylesheet_directory() . '/lib/theme-defaults.php' ); //* Set Localization (do not remove) load_child_theme_textdomain( 'parallax', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'parallax' ) ); //* Add Image upload to WordPress Theme Customizer add_action( 'customize_register', 'parallax_customizer' ); function parallax_customizer(){ require_once( get_stylesheet_directory() . '/lib/customize.php' ); } //* Include Section Image CSS include_once( get_stylesheet_directory() . '/lib/output.php' ); //* Child theme (do not remove) define( 'CHILD_THEME_NAME', 'Parallax Pro Theme' ); define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/parallax/' ); define( 'CHILD_THEME_VERSION', '1.2.2' ); //* Enqueue scripts and styles add_action( 'wp_enqueue_scripts', 'parallax_enqueue_scripts_styles' ); function parallax_enqueue_scripts_styles() { wp_enqueue_script( 'parallax-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_style( 'dashicons' ); wp_enqueue_style( 'parallax-google-fonts', '//fonts.googleapis.com/css?family=Montserrat|Sorts+Mill+Goudy', array(), CHILD_THEME_VERSION ); } //* Add HTML5 markup structure add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); //* Add viewport meta tag for mobile browsers add_theme_support( 'genesis-responsive-viewport' ); //* Reposition the primary navigation menu remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' ); //* Reposition the secondary navigation menu remove_action( 'genesis_after_header', 'genesis_do_subnav' ); add_action( 'genesis_footer', 'genesis_do_subnav', 7 ); //* Reduce the secondary navigation menu to one level depth add_filter( 'wp_nav_menu_args', 'parallax_secondary_menu_args' ); function parallax_secondary_menu_args( $args ){ if( 'secondary' != $args['theme_location'] ) return $args; $args['depth'] = 1; return $args; } //* Unregister layout settings genesis_unregister_layout( 'content-sidebar-sidebar' ); genesis_unregister_layout( 'sidebar-content-sidebar' ); genesis_unregister_layout( 'sidebar-sidebar-content' ); //* Add support for additional color styles add_theme_support( 'genesis-style-selector', array( 'parallax-pro-blue' => __( 'Parallax Pro Blue', 'parallax' ), 'parallax-pro-green' => __( 'Parallax Pro Green', 'parallax' ), 'parallax-pro-orange' => __( 'Parallax Pro Orange', 'parallax' ), 'parallax-pro-pink' => __( 'Parallax Pro Pink', 'parallax' ), ) ); //* Unregister secondary sidebar unregister_sidebar( 'sidebar-alt' ); //* Add support for custom header add_theme_support( 'custom-header', array( 'width' => 360, 'height' => 70, 'header-selector' => '.site-title a', 'header-text' => false, ) ); //* Add support for structural wraps add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'footer-widgets', 'footer', ) ); //* Modify the size of the Gravatar in the author box add_filter( 'genesis_author_box_gravatar_size', 'parallax_author_box_gravatar' ); function parallax_author_box_gravatar( $size ) { return 176; } //* Modify the size of the Gravatar in the entry comments add_filter( 'genesis_comment_list_args', 'parallax_comments_gravatar' ); function parallax_comments_gravatar( $args ) { $args['avatar_size'] = 120; return $args; } //* Add support for 3-column footer widgets add_theme_support( 'genesis-footer-widgets', 1 ); //* Add support for after entry widget add_theme_support( 'genesis-after-entry-widget-area' ); //* Relocate after entry widget remove_action( 'genesis_after_entry', 'genesis_after_entry_widget_area' ); add_action( 'genesis_after_entry', 'genesis_after_entry_widget_area', 5 ); //* Register widget areas genesis_register_sidebar( array( 'id' => 'home-section-1', 'name' => __( 'Home Section 1', 'parallax' ), 'description' => __( 'This is the home section 1 section.', 'parallax' ), ) ); genesis_register_sidebar( array( 'id' => 'home-section-2', 'name' => __( 'Home Section 2', 'parallax' ), 'description' => __( 'This is the home section 2 section.', 'parallax' ), ) ); genesis_register_sidebar( array( 'id' => 'home-section-3', 'name' => __( 'Home Section 3', 'parallax' ), 'description' => __( 'This is the home section 3 section.', 'parallax' ), ) ); genesis_register_sidebar( array( 'id' => 'home-section-4', 'name' => __( 'Home Section 4', 'parallax' ), 'description' => __( 'This is the home section 4 section.', 'parallax' ), ) ); genesis_register_sidebar( array( 'id' => 'home-section-5', 'name' => __( 'Home Section 5', 'parallax' ), 'description' => __( 'This is the home section 5 section.', 'parallax' ), ) ); add_filter('widget_text', 'do_shortcode'); wp_enqueue_script( 'isInViewport', get_bloginfo( 'stylesheet_directory' ) . '/js/isInViewport.js', array( 'jquery' ), CHILD_THEME_VERSION ); jQuery(document).ready(function ($) { "use strict"; /* activate pause for lightbulb video if scrolled out of viewport */ $(window).scroll(function() { $('video').each(function(){ if ($(this).is(":in-viewport( 400 )")) { $(this)[0].play(); } else { $(this)[0].pause(); } }); }); });
August 26, 2015 at 3:57 pm #163634scaramia
MemberHi Victor. I thought if I deleted the copy I pasted in that functions.php, and deleted the isInViewport.js, I could get back to where I was.
Instead I've got the equivalent of a white screen of death with that error message about line 156, which is no longer there.
I guess I'm over my head. Can you help?
Thanks,
Steve
August 26, 2015 at 4:40 pm #163649scaramia
MemberForget it. I downloaded the functions.php file. Your code was still there. I replaced the file, and it's all back. Still looping.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.