- This topic has 8 replies, 3 voices, and was last updated 3 years, 7 months ago by
Tom.
-
AuthorPosts
-
October 11, 2018 at 6:58 pm #699130
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.4October 12, 2018 at 3:49 am #699332David
StaffCustomer SupportHi 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/October 12, 2018 at 5:29 pm #699817Zero
Does your response mean that the code I used should have worked?
See my next post for link to where header should be working…
October 12, 2018 at 5:32 pm #699822Zero
Ah, well, I can create a test page, of course:
October 12, 2018 at 7:17 pm #699849Tom
Lead DeveloperLead DeveloperThe
<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-developmentOctober 13, 2018 at 2:57 pm #700373Zero
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.
October 13, 2018 at 10:02 pm #700455Tom
Lead DeveloperLead DeveloperTry 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-developmentOctober 14, 2018 at 1:46 pm #700905Zero
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.
October 14, 2018 at 7:26 pm #701000Tom
Lead DeveloperLead DeveloperGlad 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 -
AuthorPosts
- You must be logged in to reply to this topic.