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

[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

[Tom]

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

[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

[Tom]

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.

[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.

[Tom]

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 🙂

[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.

[Tom]

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

[Author]

Posts