Elements vimeo video in header? How to?

[Zero]

I want to put a vimeo video in a page header. I read this: Page Hero Background Video

I added this HTML to ELEMENTS >> PAGE HERO

<video loop muted autoplay poster=”http://actingupward.com/wp-content/uploads/video-image.jpg” class=”background-video”>
<source src=”https://vimeo.com/294696325″ type=”video/mp4″>
</video>

CSS: I copied the CSS from the support page and added from the dashboard via: Customize Appearance >> additional CSS.

RESULT: I see a sliver of the linked JPG and the text link of the video I am trying to have show up… but no video.

How do I get a vimeo link to show up in a generatepress header?

GeneratePress 2.1.4

[David Customer Support]

Hi there,

can you share a link to a page with the video header in place?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Zero]

Does your response mean that the code I used should have worked?

See my next post for link to where header should be working…

[Zero]

Ah, well, I can create a test page, of course:

http://actingupward.com/test/

[Tom Lead Developer]

The <source> element needs to link to a .mp4 file. Right now, you’re linking to the page that hosts the video (https://vimeo.com/294696325).

I believe only Vimeo Pro allows you to use the full URL to the video.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zero]

I uploaded the video locally and linked to it that way.

Now there is just a sliver of the video playing — and the text link of the video file is visible (creating the “height” of the header)… and there also appears to be some kind of white overlay on top of the video. Or perhaps it’s related to opacity — which, if that’s part of the CSS file, should default to no opacity.

Thanks for your help.

*Yes, it was related to the default opacity of the CSS file. I really wish this was more clear in the documentation.

[Tom Lead Developer]

Try giving the Page Hero more top and bottom padding in the settings.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zero]

The whole process ended up being far too muddled for what *I* wanted to do (video + sound + controls + option to slide to other videos/images) — so I used Smart Slider 3 (free version) to add a vimeo video layer — and then put the smartslider shortcode in page hero.

I mistakenly thought that because you couldn’t add video as a slide, that video wouldn’t work. False. You simply have to add video as a _layer_ (and the free version allows for Youtube and Vimeo links).

I love generatepress — and the added functionality of elements is great — but using a 3rd party plugin to add video to the header is A LOT easier (for me) than the present GP option.

Thanks for your time in trying to troubleshoot this issue with me.

[Tom Lead Developer]

Glad you got something working. Thanks for the feedback! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts