Background video not responsive

Greetings All,

I purchased sydney pro and am loving it so far, the main reason was for the background video/header option, which looks great on desktop.

When you view the video on mobile, it’s zoomed in way too much, is there anyway to make the video responsive?

My website is: yourvisa.ca

Hello Bilalb,

Can you please describe how exactly you added that video?

Kind Regards, Roman.

Please confirm if below was the correct method:

  • uploaded the video into media
  • copied the mp4 url
  • while on the homepage, I made a new row using page builder and clicked edit row
  • on the right side, there is a background video option. I enabled it and copied and pasted the url

At this point, the video was playing but it was not full screen and it was only showing a small slit of the video. So under edit row, I edited the layout by making the top/bottom padding 400px, and the row layout: full width.

Hello Bilalb,

Please try to do the following. Go to your Dashboard → Appearance → Customize → Header area → Header type section, select Video for Front page header type, and click Save & Publish button.

Then go to your Dashboard → Appearance → Customize → Header area → Header Media section, select Header Video, and click Save & Publish button.

Kind Regards, Roman.

I already have the front page header type selected as video.

I do not see a section called Header Media. Am I missing a theme update? Any reason why I cannot see this? I did purchase the pro version.

Hello Bilalb,

I have just checked your website, you are using Sydney Pro 1.55. Currently there is Sydney Pro 1.56 available.

Also you can try to deactivate all your plugins except Sydney Toolbox, Page Builder by SiteOrigin, Crelly Slider, and check if you can see that section.

Kind Regards, Roman.

I’ve updated the theme and also tried deactivating the plug-ins, still no use.

Any other recommendations?

Hello Bilalb,

That functionality appeared in WordPress 4.7. You are using WordPress 4.6.6.

Please remember about importance of regular full site backups (files and database):
https://codex.wordpress.org/WordPress_Backups

Also you might want to check this tutorial:

Kind Regards, Roman.

Thank you! But how do I remove the pause button?

Hello Bilalb,

Please try to use the following CSS code in order to hide (not remove) that button.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#wp-custom-header-video-button {
    display: none;
}

Kind Regards, Roman.

It worked. Thank you for your help.

Great, you are welcome Bilalb!

Kind Regards, Roman.