[Resolved] Video Header Merge

Home Forums Support Video Header Merge

This topic contains 11 replies, has 2 voices, and was last updated by  Leo 6 days, 1 hour ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1006309

    Jana

    I’ve already successfully used a hero video with a logo superimposed but even though I’m copying the code from my previous version, it’s not working. But the logo is underneath the video. It’s also not resizing when I make the window smaller like my old one.

    Here is the code I’m using with merge:
    <video loop muted autoplay poster=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/bull_elephant_karner_blue_capital_1900x1100_dk.jpg” class=”background-video”>
    <source src=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.mp4″>
    <source src=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.webm”>
    <source src=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.ogv”>
    </video>

    Here is the code to the old version:
    <video loop muted autoplay poster=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/bull_elephant_karner_blue_capital_2056x1161_dk.jpg” class=”background-video”>
    <source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/Karner_Blue_Capital_Butterflies.mp4″>
    <source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/Karner_Blue_Capital_Butterflies.webm”>
    <source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/Karner_Blue_Capital_Butterflies.ogv”>
    </video>

    Thanks, Jana

    #1006334

    Leo Customer Support

    Hi there,

    Can you link me to the one that’s working so I can try to identify the difference?

    Let me know 🙂

    #1006693

    Jana
    #1006946

    Leo Customer Support
    #1006978

    Jana

    Sorry! Where is my head today? Wrong site. It is here:

    https://karnerblueanimalwelfarefund.com
    password – animalimpact

    thanks!

    #1007001

    Leo Customer Support

    So that is the correct site?

    But the logo is also underneath the video?

    #1007008

    Jana

    Yes – I covered up the log with a text block so the client wouldn’t freak – do you need to see it?

    The other problem is that, unlike the first site I used this exact coding on, the video is not resizing with the screen size (tablet, phone) or when I resize the screen on my computer.

    Thanks, Jana

    #1007010

    Leo Customer Support

    I need to see both the correct and incorrect layout to compare the differences.

    #1007020

    Jana

    Here’s the working code in this site:
    https://centerforahumaneeconomy.org/karnerbluecapital/staging/

    It’s set to Merge 40 offset / bottom 725/450 / no featured image
    <video loop muted autoplay poster=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/bull_elephant_karner_blue_capital_2056x1161_dk.jpg” class=”background-video”>
    <source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/Karner_Blue_Capital_Butterflies.mp4″>
    <source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/Karner_Blue_Capital_Butterflies.webm”>
    <source src=”https://centerforahumaneeconomy.org/karnerbluecapital/•
    /wp-content/uploads/2019/09/Karner_Blue_Capital_Butterflies.ogv”>
    </video>

    The non-working code is one this site:
    https://karnerblueanimalwelfarefund.com
    Set to merge but without 40 because this moves the nav bar down.
    You’ll see where the logo is now and it’s not even centered now

    <video loop muted autoplay poster=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/bull_elephant_karner_blue_capital_1900x1100_dk.jpg” class=”background-video”>
    <source src=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.mp4″>
    <source src=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.webm”>
    <source src=”https://karnerblueanimalwelfarefund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.ogv”>
    </video>

    #1007032

    Leo Customer Support

    You are missing quite a bit of CSS that the working site is using.

    For example: https://www.screencast.com/t/efRdt3Luf

    Please do make sure the HTML, header element settings and CSS are all exactly the same.

    You can also use browser inspect tool on both the working and non-working site to compare the differences – definitely good skill to learn if you are doing client work.

    #1007051

    Jana

    I totally forgot the css!!! Thanks for your tip on using the web inspector – I’ll do that next time. And thanks for the hand-holding!!! Jana

    #1007086

    Leo Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.