Skip Navigation

[Resolved] Create a full-screen video background Layout with text layered above it

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use Layouts to create a full-screen page design with a background video, and place text over the video.

Solution: Layouts isn't designed to help you create this type of layered design. It will require custom CSS, JavaScript and HTML.

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 6 replies, has 2 voices.

Last updated by ivicaV 7 years, 2 months ago.

Assisted by: Christian Cox.

Author
Posts
#570663
Captureasd.JPG

Tell us what you are trying to do?

I want to build one page template with Toolset. I need first page to be full width page with video background and some text over it. Therefore I need to put it inside same "container" so I can place text over video. Can I do that using rows for video and another for text. Or do I need to put them inside text container and than insert video and text over it.

Is there any documentation that you are following?

No

Is there a similar example that we can see?

hidden link

What is the link to your site?

None visible from outside

#570790

Hi, Layouts isn't really designed to help you create this kind of multi-layered effect, and this type of custom interface will require some custom code. Does your site theme's documentation include any examples of full-width pages? Does your site theme include any examples of full-screen videos, overlayed with text? If so, I may be able to help you integrate with those existing templates.

#570922

Hi Christian,

Thanks for your reply. Here is some example I am trying to copy somewhat...

hidden link
hidden link

That is one page theme I am trying to implement via Toolset. I'll need some JS and custom CSS, just tought I can create more with toolset itself before I dive into modifying theme.

#571068

Can you use shortcodes in these content areas? If so, you may be able to display Toolset content in each section of the home page. It depends on how your theme is set up - some do not allow shortcodes in content but others do. Try to insert a View shortcode like wpv-post-title in one of the content areas to see if it's rendered correctly, or simply written to the page. More information about Views shortcodes here:
https://toolset.com/documentation/user-guides/views-shortcodes/

For the Video background, it looks like you must supply the 11-letter ID of a YouTube video. In order to get this Video from a Types field, it would require 2 things:
- The ID field in the video Customizer must support shortcodes
- You would be required to store the 11-letter YouTube ID in a custom field. Then you could use the wpv-post-field shortcode to place the ID in the Customizer.

#571082

Hm. Let me see if I understand you correctly. You propose to create View from post with video as background and then to put it inside Layout field? I can use any theme I want since I will style it from scratch...

If it can help you, I need to create multilingual site with one static page where user will choose language and then on every other page i will use same content (on different languages) but with different video. That "other page" will look very similar like one tone one page template. For now I am stuck on that section where i need to insert video as background.
One solution is to put some html field and write some code by hand but I was wondering if it is easier way to do it with layout.

#571120

I'm suggesting not using Layouts for this page. I'm suggesting you use the theme's built-in design, and integrate Views shortcodes in the Customizer panel to display content from Types within the theme's design.

#571122

I appreciate honesty. 🙂 But with that theme I do not need to use Toolset at all and I am not able to put page with language selector before one page with video. I wanted to achieve same result with toolset but with some blank theme. But never mind I will manage it somehow.