How to Add Full Screen Video Background to Post/Page without Plugin

Hello - become very frustrated with this issue! We are looking to a have a full screen video background like it is here http://www.e3ngage.com. We used the plugin mbytplayer to acheive the effect currently - and it is exactly what we are looking for - however, the plugin caused the background images found in the homepage sections of RECENT CLIENTS, STRE3T CRED, HAVE SOMETHING IN MIND, and VISIT US - to simple disappear in Google Chrome and Safari (however, Firefox and IE worked perfectly).

As a temporary fix, what we did was add !important CSS code to override whatever element was affecting those sections and force the images to display. The full code is:

div#process #teaser-process div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/06/E3-Pittsburgh-Marketing1.png); background-position: 50%; !important; }

div#portfolio #teaser-portfolio div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/03/E3-Video-Web.png); background-position: 50%; !important; }

div#about #teaser-about div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/03/E3-Marketing-Pittsburgh-2-large.png); background-position: 50%; !important; }

div#contact #teaser-contact div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/03/Pittsburgh-Media-Company.png); background-position: 50%; !important; }

However, to our dismay, these !important CSS rules override the awesome parallax effect of the homepage sections. You can see it in action at:

http://demo.udthemes.com/ego/wordpress/

I then tried to add the CSS rule:

background-attachment: fixed; !important

However, this then caused the very same problem we were trying to avoid, ie. the homepage section images disappear in Chrome and Safari, but work well (and the parallax effect too) in Firefox and IE. It seems whatever is going on, the background-attachment: fixed; is causing it.

From various support developers, there seems to be two options, either 1) add the full screen video background into Homepage Slider 1 using raw HTML code or 2) remove the !important CSS elements and reduce the z-axis of the video background plugin's code - unfortunately, neither of which I know how to do.

Could you please help me figure out how to have the full screen video background on the Homepage Slider 1 without causing the parallax effect to fail in Google Chrome and Safari?

Thank you very much for your assistance.

Best,

AD

  • Alexander

    Hi @Adrian,

    Thanks for all the additional info, I see this is somewhat of a continuation of this post: https://premium.wpmudev.org/forums/topic/how-to-add-a-full-width-video-into-various-sections-slides-of-the-ego-wordpress-theme

    We can just continue to discuss it here. Jack's passed on the email you sent in to him over to me.

    I have some ideas here, so I'm going to install this on a test site, and play around with it. I'll get back in touch when I have more info.

    Can you please let me know what plugin you are using for the video background? Or how this is being implemented? Then I could try to recreate the same dillema on my site and go from there.

    Thanks!

  • Alexander

    Hi @Adrian,

    I've looked into this, and unfortunately I don't have much to offer here. To do this right would require a good amount of work. There really isn't a one off solution here. The CSS rules you've added work to make the background video appear properly.

    The video plugin introduces many complications to the layout, and with both the parallax and the video having their styles dynamically updated with Javascript, this is alot hard to get working together.

    I'm sorry I wasn't able to get a quick CSS of javascript solution put together for you here. This is going to need custom coding to integrate the wpmbytplayer with your theme better. We don't undertake custom work at WPMU DEV, but if you're looking to hire a developer, be sure to checkout our job boards here: https://premium.wpmudev.org/wpmu-jobs/

  • Alexander

    Alrighty! Glad you asked! I may actually have something here. First, disable that video embed plugin.

    Try including this HTML right after the opening body tag:

    <div id="youtubebkg">
      <iframe frameborder="0" height="813px" width="100%"
        src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1">
      </iframe>
    </div>

    This CSS will also need to be included:

    <style>
    #youtubebkg {
        position:fixed;
        z-index:-100;
        width:100%;
        height: 100%;
        top:0;
        left:0;
    }
    </style>

    Now, I've only tested this with the default TwentyTwelve theme, but it worked just fine for me. You might need to play with the z-index to get your other content to show on top.

    This doesn't use any javascript, so it shouldn't conflict with the dymanic styles from the parallax plugin the theme uses

    Let me know how it goes.

    Best regards

    EDIT: Just tested this on your site form Chrome Dev Tools in my browser and it looks good from what I could do. Won't know for sure until that plugin is gone though. Might still need a few tweaks when it's all said and done.

  • Adrian

    Hi Alex!

    Thank you so much this is a huge step in the right direction - your help is very very much appreciated! I set it up on http://www.e3demo.com now to work out a few kinks. It's starting to come together! One thing I did notice is that the circular logo does not show up - I tried messing with the z-axis but it did really weird things (such as sticking the video inside of the circular logo but only in chrome, etc.). Also - any way to stop that black screen from showing up when the loop effect occurs? I had to add a playlist parameter to get it to work - Im not sure if thats why there is a slight black screen lag.

    However the good news is that the original issue seems resolved with this strategy

    Very sorry to keep troubling you and your team with this. I know its seems like such a minor detail and I really appreciate your time and your help

    Best,

    AD

  • Alexander

    I'm sorry, I should have been more clear. You can open up header.php, and find the opening body tag. It probably looks something like this\

    <body <?php body_class(); ?>>

    Immediately after that, you can paste this code:

    <?php if(is_home()) { ?>
    <div id="youtubebkg">
      <iframe frameborder="0" height="813px" width="100%"
        src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1">
      </iframe>
    </div>
    <?php } ?>

    I added a but of extra PHP there which will ensure this only happens on the home page. If you want it on all the pages, just remove the first and last lines.

    Best regards

  • Alexander

    Hi @Adrian,

    I actually need to make one code correction. I tested this again in my browser, and the looping didn't work, sorry I missed that the first time around.

    I checked your site, and the video isn't being loaded at all. So it looks like it's not detecting the home page properly.

    You could quickly test this by removing the PHP condition I added, and just use this:

    <div id="youtubebkg">
      <iframe frameborder="0" height="813px" width="100%"
        src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&end=7&playlist=56_AAwkyTwI">
      </iframe>
    </div>

    (this is fixed for the looping)

    Next we could test with the "is_front_page" function.

    <?php if(is_front_page()) { ?>
    <div id="youtubebkg">
      <iframe frameborder="0" height="813px" width="100%"
        src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1">
      </iframe>
    </div>
    <?php } ?>

    One other suggestion, because we're not using the javascript API, there isn't a way to mute audio. There's a buzz right before the end of this video, and it actually ends on a black frame. I would recommend reuploading the video without audio, and making the video end in a way that it will loop better.

    Best regards

  • Adrian

    Hey Alex - thanks for the tip on the reupload of the video ill definitely do that. I added the code but (of course lol) i think I did something wrong. Here is the code how I added it, is this correct?

    <?php if(is_home()) { ?>

    <div id="youtubebkg">
    <iframe frameborder="0" height="813px" width="100%"
    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&end=7&playlist=56_AAwkyTwI">
    </iframe>
    </div>

    <?php if(is_front_page()) { ?>
    <div id="youtubebkg">
    <iframe frameborder="0" height="813px" width="100%"
    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1">
    </iframe>
    </div>
    <?php } ?>

    <!--start wrapper-->
    <div id="wrapper">

  • Alexander

    Quoting your post, I've just bolded what should be removed to make it easier to see:
    <?php if(is_home()) { ?>

    <div id="youtubebkg">
    <iframe frameborder="0" height="813px" width="100%"
    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&end=7&playlist=56_AAwkyTwI">
    </iframe>
    </div>

    <?php if(is_front_page()) { ?>
    <div id="youtubebkg">
    <iframe frameborder="0" height="813px" width="100%"
    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1">
    </iframe>
    </div>
    <?php } ?>

  • Adrian

    Hey Alex - thanks again for the continued help - it still seems to be messed up though - now the logo is not loading again =/ Sorry this is such a mess we should have just used a different theme or something but now its to late sighh. Here is the code as it is now:

    </head>
    <body <?php body_class(); ?>>

    <?php if(is_front_page()) { ?>
    <div id="youtubebkg">
    <iframe frameborder="0" height="813px" width="100%"
    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1">
    </iframe>
    </div>
    <?php } ?>

    <!--start wrapper-->
    <div id="wrapper">

  • Alexander

    @Adrian,

    What browser and OS are you using? When I visit it now I get the video background + the logo. I'm in Chrome on OSX.

    Somehow we're not using the looping code again. In the src attribute in the code above, can you add the the playlist attribute?

    Right now it is:
    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1"

    We need to add &playlist=56_AAwkyTwI so it looks like this:

    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&playlist=56_AAwkyTwI"

    Best regards

  • Adrian

    Hi Alex,

    Here is code as is now:

    </head>
    <body <?php body_class(); ?>>

    <?php if(is_front_page()) { ?>
    <div id="youtubebkg">
    <iframe frameborder="0" height="813px" width="100%"
    src="https://youtube.com/embed/56_AAwkyTwI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&playlist=56_AAwkyTwI">
    </iframe>
    </div>
    <?php } ?>

    <!--start wrapper-->
    <div id="wrapper">

    I am using Windows 7 x64 - I checked in Google Chrome and it seems to working pretty well there (although there are a few issues) - but in IE its really broken (its just the video there nothing else) and in FireFox the logo does not appear.

    Again I'm very sorry this is such a pain in the ass. Im actually heading out to a meeting and won't be back at this until tomorrow so please don't feel the need to respond right away I hate to take up so much of your time with this shit. Thanks again for all the support so far it's been a huge help. If necessary I will hire someone to do it - but so far I'm really happy that I'm learning this stuff about hacking WordPress (didn't even know what the header.php did until today lol). Thanks again.

    Best,

    AD

  • Alexander

    Hi @Adrian,

    Not a pain at all! I'm glad we were at least able to try. I'm sorry about the delay here. I've tried looking at this from a few more angles, but at this point, I'm not sure if there's much more I can do though.

    To be honest, this method is really more of a hack, and I was hoping this would be a quick fix, but looks like it's not working out, especially with cross browser compatibility. There are much better ways this can be done by using the youtube javascript API - which is actually how the plugin we were working with previously worked.

    This is a bit more than we'll be able to workout here on the support forums.

    It's just that putting together something that works with the API would require more planning and custom work than just adding an HTML snippet with some CSS. It could definitely be done, but it's a bit beyond what we can offer with our support. We don't undertake custom work at WPMU DEV, but if you're looking to hire a developer, be sure to checkout our job boards here: https://premium.wpmudev.org/wpmu-jobs/

    Thanks for being a WPMU DEV member. Let us know if we can be of any further assistance.
    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.