• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Parallax Pro: Video in Home Section 1 Widget Area?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro: Video in Home Section 1 Widget Area?

This topic is: not resolved

Tagged: parallax, video, widget

  • This topic has 6 replies, 2 voices, and was last updated 7 years, 7 months ago by scaramia.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 15, 2015 at 1:18 pm #162472
    scaramia
    Member

    Has 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 #162511
    Victor Font
    Moderator

    You 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 #163478
    scaramia
    Member

    http://bayareandw.org/new/

    Hi Victor,

    I've successfully added the video using the BigVideo method:

    https://sridharkatakam.com/how-to-replace-home-section-1s-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 #163549
    Victor Font
    Moderator

    Yes. 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 #163590
    scaramia
    Member

    Thanks 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 #163634
    scaramia
    Member

    Hi 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 #163649
    scaramia
    Member

    Forget it. I downloaded the functions.php file. Your code was still there. I replaced the file, and it's all back. Still looping.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble