Archived topic

Video Header Merge

11 replies · Started by Jana on September 10, 2019

Viewing posts 1–12 of 12

September 10, 2019 at 6:54 pm #1006309

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

September 10, 2019 at 7:50 pm #1006334

Hi there,

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

Let me know :)

September 11, 2019 at 6:38 am #1006693

Sorry - thought I did:
https://animalwellnessaction.org/in-the-news/?preview_id=11477&preview_nonce=a19be0efba&preview=true

September 11, 2019 at 9:28 am #1006946

This is what the link shows:
https://www.screencast.com/t/9elbpdSE5K

September 11, 2019 at 9:54 am #1006978

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

https://karnerblueanimalwelfarefund.com
password - animalimpact

thanks!

September 11, 2019 at 10:24 am #1007001

So that is the correct site?

But the logo is also underneath the video?

September 11, 2019 at 10:29 am #1007008

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

September 11, 2019 at 10:31 am #1007010

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

September 11, 2019 at 10:39 am #1007020

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

September 11, 2019 at 10:45 am #1007032

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.

September 11, 2019 at 10:59 am #1007051

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

September 11, 2019 at 11:50 am #1007086

No problem :)

This archived topic is closed to new replies.

Start building better websites today.