[Support request] Video background header (vimeo/youtube)

Home Forums Support Video background header (vimeo/youtube)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #276953
    Guillaume

    Hi there,

    In the video option for the pageheader, I’d love to add an url to a video hosted on youtube / vimeo as background video. (it’s a 100Mo video).

    On this topic, Tom said it would work with Vimeo.

    https://generatepress.com/forums/topic/hosted-video-url-as-pageheader-vimeo-youtube/

    I can’t find any link to a MP4 as mentionned by Tom. I have a Pro account on Vimeo. Is this still relevant?

    Is there another way?

    As, most of the multipurpose themes out there offer this feature, any way to do this would be greatly appreciated.

    Thanks!
    Guillaume

    GeneratePress 1.3.44
    GP Premium 1.2.94
    #277037
    Tom
    Lead Developer
    Lead Developer

    In “Settings > Video File” you should find your file URLs: https://www.screencast.com/t/ZegjbsmXUr

    #277107
    Guillaume

    Hi Tom,

    I get it. I don’t have a “Pro” account on Vimeo, only “Plus” account which doesn’t have this feature…
    Does this trick work with YouTube?

    Thanks

    #277174
    Tom
    Lead Developer
    Lead Developer

    I’m not sure if YouTube provides the direct URL to the file? As long as you have that file URL it shouldn’t matter where it comes from.

    #288781
    Alo

    Is there a reason this functionality (adding a youtube video link to page header background) has not been added to GeneratePress yet? Can someone clearly confirm whether or not this feature is coming and how soon is this planned? I would greatly appreciate it.

    #288903
    Tom
    Lead Developer
    Lead Developer

    Currently the feature needs a direct link to the video file.

    YouTube provides no such link unfortunately.

    Re-working the video background functionality is in the plans, I’ll see if it’s possible to use YouTube videos then 🙂

    #288912
    Alo

    I found a solution for until then. While not beautiful, it seems to works as expected. However it is still a bit wonky on mobile.

    This html to page header content window (I put it before the actual text content):

    <div class="video-background">
        <div class="video-foreground">
          <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>

    And this CSS in the customiser:

    * { box-sizing: border-box; }
    .video-background {
      background: #000;
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -99;
    }
    .video-foreground,
    .video-background iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    #vidtop-content {
    	top: 0;
    	color: #fff;
    }
    .vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
    .vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
    .vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
    @media (min-aspect-ratio: 16/9) {
      .video-foreground { height: 300%; top: -100%; }
    }
    @media (max-aspect-ratio: 16/9) {
      .video-foreground { width: 300%; left: -100%; }
    }
    @media all and (max-width: 600px) {
    .vid-info { width: 50%; padding: .5rem; }
    .vid-info h1 { margin-bottom: .2rem; }
    }
    @media all and (max-width: 500px) {
    .vid-info .acronym { display: none; }
    }

    However if someone can check and maybe modify this here code to provide a fallback image option for mobiles, that would be awesome.

    #288914
    Tom
    Lead Developer
    Lead Developer

    Yep, that’ll definitely work. Not sure if adding a fallback image is possible to that method, but I’ll take a look around 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.