When first loading a page that has the video player plug in, the whole area below the video turns grey for a moment before the video shows up in its correct size. I assume that this is the time it takes the JavaScript to calculate the size it needs to make the height of the video container.
The worst thing is that when using a video poster (fall back image) it does a strange effect with the image changing sizes and then displaying the video right after.
Is there anything that can be done to avoid this? Maybe like setting a height value somewhere? But it cannot be regular height of the container with CSS since the video needs to resize its height on smaller screens.
You can see the page here: http://slacle.com/details/ (note: it will be removed from there in a few days after development is completed)
Hi Slacle,
I can’t seem to find any usage of the Video Player widget on your website. Can you point me to the right page?
How is that possible? It’s the first thing you should see when you visit the link I gave. Unless you’re seeing it on mobile maybe? It’s THE video that’s on that page.
Here, I made screen shots.
First when the page is loading first couple of seconds. You can see the grey goes all the way to the bottom of the browser window. This is what I would like to avoid if possible.
grey on load
In the second one you can see everything loaded and the video playing already. Notice that the height of the video doesn’t go all the way to the bottom of the browser window.
video playing
Hi Slacle,
Well, that’s awkward. I had opened your website in a different tab and by the time I had viewed it had stopped playing. :S
Okay so to resolve this issue you’re going to want to set a cover image as that’ll be displayed while the browser loads the video (which will happen after the page finishes loading). The cover image will also be displayed if the media format isn’t supported by the users browser.
Ah, hehe.
Yes, I tried with a banner as I mentioned above, but that’s even worse actually, because it changes through 3 different views.
At the very first moment when accessing the page, you will see the banner in a smaller size. Only first time before the image is cached though.
Then it jumps to this:
And after that it jumps to the regular size. So this 2 step jump is what I mean that does not look good. And that’s why I think it’s better without the cover image if it will do like that.
I left it with the cover image for now online so you can take a look on the live site ;)
I meant 3 step jump.
Hi Slacle,
Hm. Let’s hide the background. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.mejs-container { background: none !important; }Then let’s try and enforce a max-height for the layer. Please add the following CSS:
.home .sow-video-widget { max-height: 355px; }This should hopefully remove two of the steps, if not all three.
You might also need to install the SiteOrigin CSS Editor.
That helps a bit :)
The no background does keep it from stretching all the way to the edge though. So there is a 1px border on the left and right.
And giving it a max-height will keep the video from stretching the whole width on bigger screens.
I will play with it tomorrow some more. Thanks for all the help! :)
Hi Slacle,
Oh, whoops. I meant 550px for the max-height.
.home .sow-video-widget { max-height: 550px; }it caps out at roughly 550px at around 2k due to the dimensions of the video so you may as well apply a max-height to prevent potential (over) stretching on load.
I found out that the 1px border on the left and right is always there actually. But with the default dark background it was not visible because it blended in. But a white 1px line in between there was very visible. So instead of background none, I just made the background in a gradient color similar to that of the video so it blends in. Now there’s just a border on the top and bottom as the video loads, but it’s good enough now ;p
Thank you very much for your help and for the great products! :)