Video Preview Different From Designer

I can’t seem to figure out why the video in the “Showcase media” section, as well as the elements below it are acting weird in tablet view. It looks fine in the designer but when I go into preview, there is a chunk of space above the video and it gets pushed down into the following elements.

Hope someone sees my question this time. Thanks in advance.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @Dark_Arts_Hittahs :wave: Great looking site you have there!

Your issue is to do with this interaction:

You have it set as a page action, so what’s happening on desktop is: At 50% of the entire site, the video will pop up. This works for the desktop breakpoint as you did this interaction with that content size and breakpoint in mind. (If you added two more sections to the site, you’d have the same issue on desktop too)

When you go to tablet, the site is actually a lot longer in pixels, so 47% becomes further down the page. The video is actually still moving at 47%, but by that point, it’s almost out of view. (Depending on your screen size, will depend if you see this at all) so what you’re seeing, is the videos position before 47%.

CloudApp

To solve this, you will need to add a scroll into view interaction to the video element or the wrapper.

I would give the settings so that the initial state of the video is 100px down and opacity: 0%
When the parent container scrolls into view make the video move 100px up opacity 100%

If you need any further help, then I’ll be happy to record a screencast for you.

Hope that helps! :smiley: :crossed_fingers:

1 Like

Hey there dude. Thanks for the help. I went ahead and just used a “scroll into view” interaction on the element. It’s all good now. :ok_hand:

1 Like