WP SITES

Log in

Infinity Pro MP4 Video Background For Front Page 1 Widget

—

by

Brad Dalton

This solution enables you to add a WordPress hosted MP4 video background to the front page 1 widget area in the Infinity Pro child theme by StudioPress. The code includes CSS for Media Queries so it’s fully responsive as shown in the following demo video:

This tutorial is based on the following question from a member of the Genesis community:

Has anyone successfully replaced the Front page images with Video backgrounds? If so, is there a recommended video background plugin?

Note : The solution in this tutorial replaces the background image for the front page 1 widget area with a self hosted mp4 video by modifying the PHP code for the widget in the front-page.php file and adding CSS to the child theme’s style.css file. No plugins are used. Has not been tested using other file types or any hosted solutions.

Code Installation

There’s 2 basic steps:

Step 1 : (a) Replace the existing code for the front-page-1 widget area with the following modified code between lines 66 – 69 in the Infinity Pro themes front-page.php file.

Register for full access

Related Tutorials

Comments

36 responses to “Infinity Pro MP4 Video Background For Front Page 1 Widget”

  1. Tom Binga Avatar
    Tom Binga

    Hi Brad,

    I’m using this to place a video on front-page-3. The video shows fine but the video overlay is positioned beneath the video, not on top of the video. I added a text widget to test and that was the result I got. I followed the tutorial step-by-step but I’m not sure what I’m missing.

    Also, how can I make it so the video-container is smaller in height?

    Thanks in advance

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Tom. The code is written to work with the front page 1 widget area as seen in the demo video and may need modification for use with other widget areas. I would need to setup the theme, install the code and work out how to modify it for use with any other widget area. This is billable as it would take some time. Note : Make sure you clear all caching after adding the CSS.

  2. Cemal Ekin Avatar
    Cemal Ekin

    Brad, to a large extent this worked like a charm:

    https://www.strive.construction/

    However, the gentle sliding scroll when the “Start your journey” button is clicked is gone and it simply jumps there. Is it possible to bring back that gliding scroll back?

    Thanks,

    Cemal

    1. Cemal Ekin Avatar
      Cemal Ekin

      Ah, I forgot to ask one more question. The video is replaced with the stationary image on mobile devices. Is it possible to make it play on phones and other mobile devices?

      Cemal

      1. Brad Dalton Avatar
        Brad Dalton

        No because some mobile browsers don’t work well with video

    2. Cemal Ekin Avatar
      Cemal Ekin

      Brad, we decided to remove the video. It was mostly working but finding a suitable video proved to be too time-consuming. You may ignore, even delete the last few responses I have posted.

      Cemal

      1. Brad Dalton Avatar
        Brad Dalton

        When i tested this dozens of times in different browsers, i never had any problem but i never tested in Windows.

        1. Cemal Ekin Avatar
          Cemal Ekin

          Thanks, Brad. Another data point for you. I’m glad the client changed his mind about a video on the front page.

          Cemal

  3. David Taylor Avatar
    David Taylor

    Hey, guys. Just bought my membership about an hour ago specifically to see these instructions! I am trying to add the code to the right spots and I’ve downloaded TextWrangler so I can ensure I’m placing the code at the correct lines.

    When I follow the instructions, the video loads very slow (assuming my fault for using large file, 30 seconds nearly 50 mb) and the video does not autoplay on Safari. I exported the video straight from iMovie as an .mp4

    Additionally, I found the I too would get the “play” button on my iphone 7.

    Safari recently had an update that STOPS autoplaying videos but some digging through a few forums and some guides in Vimeo, there’s a way to get them to play.

    If I use the embed code from vimeo and put them at lines 67-69, I then added “background=1” which MUTES the video and let’s the browser know that we are not trying to autoplay any sound. I really appreciate the write-up and it looks like you included that I can add the mute attribute so that may help with the “play” button/function on iOS devices.

    Adding the background=1 allowed the video to play through my phone as well as Safari on my laptop.

    So far, I’m getting best results when I use:

    genesis_widget_area( ‘front-page-1’, array(
    ‘before’ => ‘

    ‘,
    ‘after’ => ”,
    ) );

    However, I am running into major issues when I pull the screen to mobile size. Here is a link to a quick screen share video showing the frustrations with this code. The video does NOT stay at the top and the menu drops down below the video on mobile device.

    https://www.dropbox.com/s/qvvcuaudwcpk2o8/Ellux%20Homepage%20video.mov?dl=0

    My questions are:
    Am I running in the wrong direction with vimeo? (Fingers crossed)
    Is there a way to glue the top of my video to the bottom of my menu bar?

    The website that I’m comparing mine to is: http://thebigbounceamerica.com/

    the top of their homepage is exactly what I’m going for but I am unsure how they’re getting it.
    Thank you for your time and any response.

    1. David Taylor Avatar
      David Taylor

      My webpage is http://elluxfuror.com/

      1. Brad Dalton Avatar
        Brad Dalton

        Hi David, i’ll publish another solution on Saturday when i get back from leave. Also note : This solution only works using a self hosted .mp4 file and has not been tested with other file types or hosted solutions.

        1. David Taylor Avatar
          David Taylor

          Woo! Safe travels! Enjoy your time away from work!

    2. Brad Dalton Avatar
      Brad Dalton

      This solution only works with self hosted mp4 videos ( Nothing else ) and has never been tested using hosted videos including Vimeo.

      You can add any attributes you like to mute, auto play or prevent autoplaying.

      As you can see in the demo video, the video works perfectly on all screen sizes.

      This solution does NOT support Vimeo or any other hosted video providers.

      1. David Taylor Avatar
        David Taylor

        Ok so basically I should look elsewhere for help with video embed from Vimeo, right?

        1. Brad Dalton Avatar
          Brad Dalton

          It would be easier just to upload your MP4 video file to your WordPress library rather than use Vimeo which is hosted on Vimeos servers. This solution uses the video player built into WordPress which is a more reliable solution for use with WordPress themes.

    3. Brad Dalton Avatar
      Brad Dalton

      Here’s the solution for replacing the video with a image on smaller screens https://wpsites.net/web-design/fallback-image-replacing-video-on-mobile/

  4. BeckyBruso Avatar
    BeckyBruso

    Hi Brad- I have a need to place my front page widget about 75% down the front-page-1 section. I have removed the overlay text and the widget button pop up as a result. Do you a solution which might help to position these lower ?

    Thanks.
    Becky

    1. Brad Dalton Avatar
      Brad Dalton

      Try CSS positioning

      [code]
      #front-page-1 .widget {
      Add Your CSS Declarations here
      }
      [/code]

  5. BeckyBruso Avatar
    BeckyBruso

    Do you recommend turning off the video autoplay for mobile? On the iphone 5s, the play button displays in place of the auto play, so I plan to code the fallback image only for 320 min. I also received critique that autoplay on mobile would cause distress for mobile users. I wanted to get your feedback on this.
    Thank you.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Becky. Good question. Not sure what the best solution is sorry.

      1. BeckyBruso Avatar
        BeckyBruso

        Brad- Thanks. I am going to create a style for the 320 to load an image only in place of the video for front-page-1 on 320size media, as on the iphone it loads the video with the play button. On my website, this gets shown below my front-page-1 headings, which looks crappy. I have been struggling with trying to load the poster for the video only via a media query for the 320 size, but have given up on this. I am now planning to create a style sheet specifically for the 320 for front-page-1 and load it via

        Do you know of a better way to do this and what would you advise for a max width on this if any?
        Thanks Brad.

        Becky

        1. Brad Dalton Avatar
          Brad Dalton

          Why do you need max-width?

          I would use something like this in the style-front.css file

          [code]
          @media only screen and (max-width: 320px) {

          video {
          display: none;
          }

          .video-overlay {
          background-image: url(‘images/bg-1.jpg’);
          }

          }
          [/code]

          1. BeckyBruso Avatar
            BeckyBruso

            Hi Brad- I didn’t think I did- but was using an example. I tried the code you sent and it still shows up on my iphone 5s with the play button. I am note entirely sure that the cache is cleared out and this is the real result, however. As I have had issues in the past with this. I have cleared cache on the phone, and website reloaded css, etc. and on the studiopress responsive it still plays on the 320 wide view.. Do you think it could still be a cache issue? I double checked my code to be sure that I had the media query bounded correctly within braces.
            Thanks.
            Becky

          2. Brad Dalton Avatar
            Brad Dalton

            I think you’re using the wrong class. Please use the CSS i posted as it’s tested. You only need to change the file name and extension to match your image and clear all caching. The iphone 5 is 320px

          3. BeckyBruso Avatar
            BeckyBruso

            Hi Brad- I think it is a server issue: I forced it to load the display: none !important; Then used the video url. This stopped the front-page-1 video from loading in Chrome developer @ 320, then I could see the issue. It then gave me an error on finding the image, yet when I navigate to the image using the exact url in the code, it shows the image. Thanks for you help. I will be trouble shooting why image won’t load. Either with full url or ../wp-content/… it can’t find the image…
            Thanks for your help.

            Becky

          4. Brad Dalton Avatar
            Brad Dalton

            Could be a caching issue. I know with Chrome, you need to clear the cache even when working locally with CSS changes.

      2. BeckyBruso Avatar
        BeckyBruso

        Hi Brad- Sorry to be a pest- but I thought you would want to know that to get the background image to work; I needed to use the video-container @ the 320 media. I used the following:
        [code]
        video {
        display: none !important;
        }
        .video-container {
        height:300px;
        background-image: url(//website.com/wp-content/uploads/2016/12/image.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        }
        }
        [/code]
        The pesky things were getting the url to be in the correct syntax to not generate a 404; enlarging the container as it collapsed at 0 height; and then fixing the repeat.
        Thanks.
        Becky

        1. Brad Dalton Avatar
          Brad Dalton

          Fair enough although i did test my CSS for Media Queries and they work fine. Here’s how to pull a image from your child theme’s images folder using CSS.

  6. BeckyBruso Avatar
    BeckyBruso

    I am looking to add multiple call to action buttons on the video overlay. I can do this handily for the desktop, but the mobile is not working out correctly. I created a selector for each of the buttons and can show/hide them, but the problem is that on mobile, the button I show is not clickable. I have tried various ways to add the multiple buttons all from a single text widget on front-page-1. Do you know of a way to accomplish this?

    1. Brad Dalton Avatar
      Brad Dalton

      Please post the HTML for your buttons

      1. BeckyBruso Avatar
        BeckyBruso

        Here is the present code for the buttons:
        54 EAST MAIN STREET | WESTBOROUGH, MA
         

        Make A Reservation
        Buy A Gift Card
        View Our Menu

        I have also tried simply p tags and div tags and the one-third column class from Infinity pro css. Within the selector button code, I have tried various line-heights from 1.25 to 1.5 with the present being at 200%. The column code is overkill for one column, but was trying to use the 1/3 css (col-4) class at one point. With this html, the css that I have used is as follows:
        /* columns *//*
        .row::after {
        content: “”;
        clear: both;
        display: table;
        }
        [class*=”col-“] {
        float:left;
        padding: 0px;
        }
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
        /*initial button state*/
        #reserve.button {
        visibility:visible;
        padding: 10px;
        width: 150px;
        line-height:200%;
        }
        #gift.button {
        visibility:visible;
        padding: 10px;
        width: 150px;
        line-height:200%;
        }
        #ourmenu.button {
        visibility:visible;
        padding: 10px;
        width: 150px;
        line-height:200%;
        }

        Then, one of my @media queries:
        @media only screen and (max-width:412px) {
        #reserve.button {
        visibility:visible;
        }
        #gift.button {
        visibility:hidden;
        }
        #ourmenu.button {
        visibility:hidden;
        }

        I am also experiencing issues with browser caching, which creates an additional challenge.
        Thank you for your assistance.
        Becky

        1. BeckyBruso Avatar
          BeckyBruso

          Please let me know how if the html code I posted needs to be sent differently as it posted as a webpage view from my end.

          1. Brad Dalton Avatar
            Brad Dalton

            See this HTML which uses the existing CSS for a button included in every theme.

  7. BeckyBruso Avatar
    BeckyBruso

    This works great! Thank you!

  8. marielle Avatar
    marielle

    Thank you for this tutorial but where and how do I add the code for the fall back image?

    1. Brad Dalton Avatar
      Brad Dalton

      In the widget code on line 67.

      Add the following with your link to your image in the HTML in the widget code.

      [code]poster=”http://example.com”[/code]

      Send me your FTP details if you can’t manage it.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.