[brandonlabadieParticipant]

Hello,

My website is http://www.labadiedirect.com

I am having trouble with the background video of a content band. I have text contained within this band, but as I resize the browser a black bar forms beneath the video to accommodate the responsive text. Is there any way to also begin to resize the video? I have come up with one solution that keeps the size of the video (if I force the CSS of width to 1920px), but then the text I have in the container is no longer responsive to the browser…it is as if I can have responsive text with a smaller video playing, or the correct size of the video, but no responsive text (because the container within the content band gets stretched).

I am modeling my text off this site’s http://www.sq1.com

As the browser shrinks, the text responds, but the video size stays the same no matter what. Then, as the browser gets too small, it switches to mobile platform and displays a static image. Are you able to help me accomplish this in the X theme?

Thank you.

[MrinalMember]

Hi Brandon,

To investigate the issue we need to access the website backend. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[AquorParticipant]

I am having this exact same issue, did you ever find a solution?

[RadModerator]

Hi Aquor,

I guess he’s using video layer with player like youtube where videos get black areas when it doesn’t match with the container’s aspect ratio. Would you mind providing your url address too ?

Thanks.

[AquorParticipant]

Sure, here is a link to my test page: http://www.aquorwatersystems.com/test/.

The goal is to have a responsive video banner with proportions of 1920 x 335px, so much thinner than the 16×9 the self-hosted video option allows. I’ve tried experimenting with the revolution slider, but no luck either.

I am also having problems with the smaller video on the page. It does not need to be responsive, but I need it to autoplay, loop, and have no visible controls. Even with those boxes checked, it doesn’t loop and the controls still show up. Please let me know if I’m doing something wrong. Thanks!

[RadModerator]

Hi Aquor,

Seems like you have a problem with video background. Try this one http://theme.co/x/member/forums/topic/video-header-not-showing-black/page/2/#post-103908

Once done downloading the patch, rename the folder /x-child-integrity-light/ to your own child theme’s folder name. And replace the patch’s style.css with style.css from your own child theme. Then upload your finished patch folder at your site’s theme folder. Activate it.

( YOU MUST BACKUP YOUR CUSTOMIZER SETTING, LIST ALL MENU AND WIDGETS. Changing child theme could cause data lost )

Your video is also auto-playing and looping on my end. Are you testing on mobile?

For aspect ratio, you should use same aspect ratio for your video container. For example, if video’s height is 335px then slider should be 335px too and not 460px.

Please provide an admin login too so we could check it personally.

Cheers!

[AquorParticipant]

I tried applying the patch linked and it did not work properly. I’m using the Renew stack if that matters.

See http://www.aquorwatersystems.com/test2

What media should look like: http://www.aquorwatersystems.com/wp-content/uploads/2014/09/AquorSite_HouseDemo21.mp4

I am only using a single video background, and while it loads on desktops, it’s too stretched horizontally. It does not load at all on mobile (tested iOS, safari and chrome), I just see a black screen and loading circle.

[MrinalMember]

Hi Aquor,

You’re using version 2.3.0 of X theme which is not compaitble with X shoetcodes v2.4.0 plugin. At first please update your X theme to latest version 2.5.1 by following this KB article: Updating Your Theme and Plugins.

Now provide your website login & FTP login info so we can check if you’ve perfectly setup the patch or not.

[AquorParticipant]

This reply has been marked as private.

[MrinalMember]

Hi Aquor,

Thanks for the login info.

Instead of using it as background video of a content band & gap element, please use a full width slider (Revolution Slider) as element there.

[AquorParticipant]

Thanks for the suggestion. The revolution slider seems to be working better, but I can’t get the play/pause button to disappear on hover. Is there an option I’m missing somewhere? (hide controls is obviously checked). The video also does not seem to load on mobile.

Also having trouble with the container background image — it’s cut off on the ends horizontally. Any idea why the parallax image below the video is like that? Thanks!

[RadModerator]

Hi there,

The video should play on mobile, but it will not auto play. Auto play is disabled on mobile browser by default to avoid data charges for data plan users. So, yes user need to play it manually. And background video needs cover photo for mobile views.

I just tried Video shortcode(self hosted) and it works just fine. Just how you like it, but still, it can’t be autoplay on mobile.

Using self hosted video shortcode :
1. Add this code at your customizer’s custom javascript, to enable looping

jQuery(function($){ 

$('.x-responsive-video video').attr('loop', true).click();

});

This should also trigger the click event to make it autoplay on mobile, but not 100% sure if will work.

2. Add this css at your customizer’s custom css.

.x-responsive-video.custom-aspect-ratio-17-3 .x-responsive-video-inner {
padding-bottom: 17.3%;
}

4. With your selft hosted shortcode, add a class named custom-aspect-ratio-17-3 to modify your video’s aspect ratio.

5. Edit your video to remove the black border from left and right, http://**********/wp-content/uploads/2014/09/AquorSite_HouseDemo21.mp4 Notice that the video isn’t touching the edges, and there is dark grey (almost black) left/right borders. They are part of the video and not part of the black background.

Tested it on my local using your video.

Cheers!

[AquorParticipant]

Hi, thanks for the tips but I think you may have misunderstood. Only issues I have now are:

– unable to hide controls on revolution slider video

– container background image does not fit to screen, it’s too wide

Thanks!

[RadModerator]

Hi Aquor,

Yes, got that. The alternative I mentioned should be working with no controls and allows looping. Still both slider and video shortcode will not autoplay the video. I just thought that video shortcode is better since you’re just using one video with no sliding effect.

We’re not the author of Rev. Slider so we can’t actually solve this internal issue. I tried with javascript, but keep overridden. I’ll just forward this control issue and wait for fix.

About the background image. Add this css at your customizer’s custom css.

.x-content-band {
background-size: 100% 100%;
}

This will create a unwanted rendering for other background images. The best option is editing your background image and add more height to give room to clipped area.

Cheers!

[AquorParticipant]

Thanks for the help!

[Author]

Posts