How to make Header Media Video not full width

Hi,

I added a YouTube video to the Header Media and it is showing on the front page of my site. However, I would like to adjust the width of the video to match my content width indicated by the red lines. (See attached image for reference). Can anyone kindly assist me with this?
Thank you.

Hello,

Can you please provide a link to your website?

Kind Regards, Roman.

Hi Roman,

Here is the link to the site: https://projectfun-kr.digipen.edu/
Thank you.

Best Regards,
Li En

Hello Li, thank you for the link.

Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

#wp-custom-header {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.slide-inner {
    padding-left: 10%;
    padding-right: 10%;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thank you! It worked like a charm!

Is there a way to do a black semi transparent overlay over the header video?

Thank you.

Best Regards,
Li En

Hello Li, try to add this as well:

#wp-custom-header::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

Kind Regards, Roman.

Hi Roman,

It worked great! Thank you! I have a couple more questions,

  1. My header video is currently not looping, how do I go about making it loop?
  2. Regarding the text and CTA button on the header video, I noticed that it is not responsive and ends up being out of position when I scaled down my window size, how do I make those responsive?

Thank you for the help! Really appreciate it!

Hello Li,

  1. Video header feature comes from WordPress itself, so I kindly suggest you to use WordPress.org forums to find a solution. You can also try to experiment with plugins if you want better functionality, default WP video header feature is quite simple and doesn’t have many options.

  2. It looks like this issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.