Video for intro section, please?

Home Forums Monument Valley Video for intro section, please?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #21068

    Lana
    Participant

    Video for intro section, please?

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi OLiver!

    I hope this finds you well:-)

    I am wondering if there a way to place a video for intro section? I see I can’t do that in my dashboard but maybe I could add that in some .php file?

    Thank you in advance for your time!

    Best,
    Lana

    P.S. I am having a blast working with Monument Valley. What a beautiful theme!

    #21069

    Oliver Juhas
    Keymaster

    Hi Lana,

    I’m really glad you like yet another theme of mine :) You’re website’s looking great!

    Monument Valley does not support WordPress’ native video header, unlike Icelander theme (only on homepage). However, you can simply use a page builder to create a desired effect, no need to code this with PHP.

    You can disable default theme intro section on the page using “No intro” page template. If you want the video on the background of the page builder row, this is possible to achieve with Beaver Builder.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21070

    Lana
    Participant

    Hi Oliver,

    Thank you so much for your reply! I actually tried using a page builder but it kind of didn’t work. I uploaded another version in development (please do not mind the colors, this thing is just for the sake of figuring out how to get the video there :-))

    I set the video as a background in page builder but I would really like to keep the intro section (I just love how everything is implemented). However, intro completely overlaps the video. Do you think this might be fixed?

    #21074

    Oliver Juhas
    Keymaster

    Hi Lana,

    I set the video as a background in page builder but I would really like to keep the intro section (I just love how everything is implemented).

    I’m not sure I understand what you aim for. Keeping the theme intro section will not display a video in the intro. You need to hide the intro section on the page using the “No intro” page template and simulate it with a Beaver Builder row.

    Default theme intro has a gradient overlay and you can actually replicate this for Beaver Builder row with a video background too. Just select a “Gradient” option for “Overlay Type” in the row settings and set it up appropriately.

    However, intro completely overlaps the video. Do you think this might be fixed?

    Can you please provide a screenshot of the issue please? I can’t see the intro overlapping the video on the URL provided.

    Or do you mean the video is in the background of the intro section created with Beaver Builder? If so, can you please explain how you need the video to appear? Do you want to display the video as a page content, not a row background? In that case try to use a “Video” page builder module instead.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21175

    Lana
    Participant

    Hi Oliver,

    I just realized that you left a reply for me here. Thank you!

    It looks like I failed to explain you what I was trying to achieve. I copied and pasted your intro section code into the Beaver Builder html module and set video as a background. However regardless of what I was trying to do background blend mode for that video didn’t seem to work out:

    background-color: var(--color_intro_background);
    background-blend-mode: multiply;

    Do you think it is just not applicable to the video block? I loved the way you did it for the theme so much! It would be awesome if I could repeat it for my video.

    • This reply was modified 5 months, 1 week ago by  Oliver Juhas. Reason: Formatting code
    #21177

    Oliver Juhas
    Keymaster

    Hi Lana,

    Thank you for explanation. What a clever workaround you are using by copying the intro section HTML ;)

    The reason why it does not work for you is because the background-blend-mode CSS property works only for backgrounds. And if you have a look at the HTML code of your website using your web browser code inspector, you’ll notice the video is not set with CSS background properties, but rather it is inserted directly into the HTML and tweaked with CSS to look like it is on the background. (From what I know, there is no way to set a video as a background in CSS, that’s why guys from Beaver Builder use this approach, which is perfectly fine.)

    To resolve the issue, try using this custom CSS instead, which targets specifically the video you need:

    .fl-node-5cb95fba8c63b .fl-bg-video {
    	mix-blend-mode: multiply;
    }

    (You can also check the browser compatibility, but the fallback seem to be perfectly fine, basically for unsupported browsers it will display the way it is now.)

    Best regards,

    Oliver Juhas
    WebMan Design

    #21191

    Lana
    Participant

    Thank you very much, I will let you know whether that worked out! :-)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.