0
Welcome Guest! Login
0 items Join Now

SOLVED A Tip for Full-Width Background Video Display

Last Post
Search Topic

  • SOLVED A Tip for Full-Width Background Video Display

    Posted 8 years 6 months ago
    • I just wanted to pass on how I set up a background video that runs automatically with a loop on my home page. This was prepared in Galatea, but should be cross-template.

      I put my video in the Slideshow position, and made sure the position itself was set for flushed full-width content. Then I just used a plain old custom HTML particle and added the following code.

      <div class="video-container">
      <video autoplay loop muted poster=" www.whenigrowup.education/templates/rt_g...s/images/header1.jpg ">

      <source src=" emailnet-my.sharepoint.com/personal/***** “ type="video/mp4">

      Your browser does not support the video tag.
      </video>
      <div class="overlay-desc">
      <a href=./give><img src=./images/WIGU/donate_btn2.png></a>
      </div>
      </div>

      I put the actual video on sharepoint and am able to make it available to download/run as needed from there rather than locally. You can run it from Vimeo, but you have to have the right account for that these days. There are probably plenty of other options, too.

      Note the ‘muted’ flag if you want it silent, and ’loop’ if you want that feature. The poster covers you for any lag time for the video to actually download enough to play.

      In your custom scss file you need the following css:
      /* VIDEO */
      .video-container {
      position: relative;
      }

      video {
      height: auto;
      vertical-align: middle;
      width: 100%;
      }

      .overlay-desc {
      background: transparent;
      opacity: 0.8;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      }

      Finally, I also used the hidden-phone class in the custom HTML black settings so that I don’t have phones trying to run the video. They get served a static image instead.

      Hope that all makes sense!

      You can see the finished product at:
      www.whenigrowup.education

      Allister

    • The following users have thanked you: Abfilm, MrT, Unay Santisteban

    #1292281
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 8 years 6 months ago
    • Thanks for sharing - I've moved this to the Gantry 5 forum as it should work on all Gantry 5 templates and I've stickied the post too.

      thanks :)

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1292303
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 8 years 6 months ago
    • Too bad it does not work with YouTube videos.
    • Last Edit: 8 years 6 months ago by Riccardo.
    • Riccardo Rausch
      www.rausch.it
    #1292481

  • Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 8 years 6 months ago
    • Awesome, thanks, this is just what I need!! :D
    #1293084

  • Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 8 years 6 months ago
    • I've not tested it exhastively, Fritz, but this site might work for you
      www.getlinkyoutube.com/watch?v=RgKAFK5djSk

      They seem to have managed to do all the heavy lifting behind the scenes to delver streamable videos from Youtube content. I copied the link for the mp4 and that at least ran a video as it should on my test page. I assume it's a permanent solution, but you would need to test it.

      Allister

    • The following users have thanked you: Empowermom

    #1293090
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 8 years 6 months ago
    #1293099

  • Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 7 years 10 months ago
    • I've followed your instructions.
      www.rockmelt.it/filmitaly/
      I don't see the video 100%, it stays in the middle of the page and decides the box height. Is it possible to set a fixed height (starting from the center)? (I have to show just a moving part, I don't mind it doesn't appear all)
    • Last Edit: 7 years 10 months ago by Alessandro Bignamini.
    #1333478
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 7 years 10 months ago
    #1333494

  • Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 4 years 6 months ago
    #1426494
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED A Tip for Full-Width Background Video Display

    Posted 4 years 6 months ago
    #1426496

Time to create page: 0.063 seconds