Jump to content
Search Community

Background Video Changes position when clicking on a button and on resize of browser

gredesign test
Moderator Tag

Recommended Posts

I have three videos on my home page that are background videos. They are set to absolute positioning so that they overlap. I have three buttons that also control which video is being shown. I'm using the latest GSAP for this functionality. Unfortunately, when the home page loads, the first video appears fine, but when I click the buttons to show the other videos, the 2nd and 3rd video's position shifts vertically. This issue only appears on Windows 10 EdgeHTML 18. In other browsers, it works fine. Spent hours trying to figure this out, in almost checked out. I think the issue rests with the background video or how GSAP sets the display of the background video when it is toggled. Need some help.
 

damage-esports.com

Link to comment
Share on other sites

@gredesign

 

Nice site! It's not GSAP that's causing the issue though. It's that you are setting the top of the video element to 50%. A quick glance at the JS and CSS doesn't show that the top property is being set anywhere but inline (I could be wrong there). But I would look at that. 

 

<video style='margin: 0px; left: 0px; top: 50%; width: 100%; height: auto; right: auto; bottom: auto; background-image: url("https://assets.website-files.com/5e59a48b9e288f23a8e10a61/5e6c798975d1aef54897b2aa_INTEL_OLYMPICS_TOKYO_SIZZLE_60sec_h264-poster-00001.jpg"); position: absolute;' autoplay="" loop="" muted="" data-wf-ignore="true" data-object-fit="cover" playsinline="">
  <source src="https://assets.website-files.com/5e59a48b9e288f23a8e10a61/5e6c798975d1aef54897b2aa_INTEL_OLYMPICS_TOKYO_SIZZLE_60sec_h264-transcode.mp4" data-wf-ignore="true">
  <source src="https://assets.website-files.com/5e59a48b9e288f23a8e10a61/5e6c798975d1aef54897b2aa_INTEL_OLYMPICS_TOKYO_SIZZLE_60sec_h264-transcode.webm" data-wf-ignore="true">
</video>

 

  • Like 1
Link to comment
Share on other sites

Thanks for looking into that Shaun and for the compliment on the site. So I had changed it to 0% for all of the videos and it fixed the 2nd and 3rd video, but threw off the position of the first video that loads. It made things even worse when I resized my browser or preview in the other browsers that it previously worked in. (Its strange that when I resize my browser without changing anything, all positions are locked back in place perfectly. Its just on initial load.)

Link to comment
Share on other sites

@gredesign

 

Taking a look through the markup and inline CSS ... there's a lot going on there that probably shouldn't be there. If possible, it would be best to strip away the inline CSS on the videos and apply a simple rule set to ".home-video video"

 

With all videos set to top: 0 and the negative margin-top removed ... things fall into place here just as they should. 

 

That said, I don't know where these inline styles are coming from (I didn't look further), but  a clean up of the CSS should fix this issue.

 

Edit: forgot to mention one thing ...

 

Something that helps with placement of video is to set the video parent to a height of 0 and its (video parent) padding-bottom to the percentage aspect ratio ... in this case 56.25% ... that may have to be adjusted at certain break points.

 

Edit 2: video to show how it responds to these CSS changes.

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...