- This topic has 8 replies, 3 voices, and was last updated 5 years, 6 months ago by Tom.
-
AuthorPosts
-
October 11, 2018 at 6:58 pm #699130Zero
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?
October 12, 2018 at 3:49 am #699332DavidStaffCustomer SupportHi there,
can you share a link to a page with the video header in place?
October 12, 2018 at 5:29 pm #699817ZeroDoes 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 #699822ZeroAh, well, I can create a test page, of course:
October 12, 2018 at 7:17 pm #699849TomLead 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.
October 13, 2018 at 2:57 pm #700373ZeroI 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 #700455TomLead DeveloperLead DeveloperTry giving the Page Hero more top and bottom padding in the settings.
October 14, 2018 at 1:46 pm #700905ZeroThe 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 #701000TomLead DeveloperLead DeveloperGlad you got something working. Thanks for the feedback! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.