[tmurthy]

Hi All,

I am trying to add a video to header but when I add it is not showing 100% of my video. Our site address is: dezignhut.com.

Could you please help me to fix this.

Thanks,
Tamil

[Skandha]

@tmurthy: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#wp-custom-header-video {
    object-fit:fill;
}

Let me know if this solves your issue!

Regards,
Skandha

[tmurthy]

Thank you, Skandha.

It is working.

But please note that the video is shrinking horizontally.

Is it possible to reduce the height of the video so it would fit prepositionally.

[tmurthy]

Just to add some points to my above post.

When we place the image as header it works fine. We can see logo and the menu on the screen without scrolling.
But we add the same size of video which is 1920 x 689 it is going wrong.

[tmurthy]

Hi Skandha,

Now I used ‘contain’ property to ‘object-fit’. It works good. But is there any chance to reduce the top and bottom of the black space which is created while we contain the video.

Thanks,
Tamil

[tmurthy]

I have fixed it. But without your guidance about ‘object-fit’, I could not have sorted it out. A BIG THANK YOU! 🙂

[Skandha]

Hello @tmurthy, Sorry for the late reply. I will forward this issue to the development team let you know as soon as there comes a better solution for it.

Regards,
Skandha

[Skandha]

Hello @tmurthy, I think I found a better solution for your issue.

Go to => Appearance => Customize => Additional CSS and the following CSS Code.

@media screen and (min-width:64em) {
	.has-header-video .custom-header-media {
	min-height:450px;
	}
}
#wp-custom-header-video {
	object-fit:cover;
}

Let me know if this works out for you.

Regards,
Skandha

[tmurthy]

Thank you, Skandha.

[Skandha]

@tmurthy: Have a good day!

Regards,
Skandha

[Author]

Posts