Archived topic

Video background header (vimeo/youtube)

7 replies · Started by Guillaume on February 10, 2017

Viewing posts 1–8 of 8

February 10, 2017 at 6:48 am #276953

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

February 10, 2017 at 10:40 am #277037

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

February 10, 2017 at 12:55 pm #277107

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

February 10, 2017 at 4:25 pm #277174

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.

March 8, 2017 at 5:33 am #288781

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.

March 8, 2017 at 8:51 am #288903

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 :)

March 8, 2017 at 9:01 am #288912

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.

March 8, 2017 at 9:03 am #288914

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

This archived topic is closed to new replies.

Start building better websites today.