Gap / black space when viewing video in full screen (Firefox & Safari)

Hello,

I am a beginner using Hype 3.
I have uploaded many mp4, by using the “Element” - Video to upload videos. (Properties only checked on Controls)
There wasn’t any problem when I tried it on Chrome of a MAC computer. But when I tried to fullscreen it on SAFARI on a MAC Computer. The full screen only shows a quarter of the screen. While the rest is black.

Then, I tested on a WINDOWS’ CHROME, IE11, FIREFOX, the fullscreen button did not show on the video.
If their is a setting or simple solution link please refer.

Thank you for your full support.

That’s odd – can you share a document so we can test this out? (Create a zip file and drop it into your reply window, or use a service like https://www.wetransfer.com to share larger files)

Thanks!

Hi Daniel

I have a similar problem. On my website made with Hype I have used the insert “HTML widget” and embedded a video hosted on Vimeo - and everything working perfectly from the day I had the website go online sometime back in august 2015.
Now it has come to my attention that the Vimeo player no longer displays the “full screen” button on Mac and on Windows. However, the button does show and work on iOS on iPad and iPhone5s.
It is a pretty big deal for me that the full screen button is visible and works - the entire design of the website is actually build around this to showcase my work this way…
There is a pretty long thread at vimeo addressing this, but Vimeo staff insists that it has nothing to do with the setup at vimeo…
https://vimeo.com/forums/help/topic:277610
I am no coder but what I understand from the thread is that this problem is browser related and to do with iframes…
Can you provide help to fix this problem? Please…
My website: www.kennethgroning.com

Kenneth:

This may be because you have an iframe within an iframe. Instead of placing your embed code in an HTML widget, place the following code within the ‘inner html’ of a rectangle:

<iframe src="https://player.vimeo.com/video/138190474" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Daniel

That was fast responding! :smile: Thanks!
I am afraid You lost me with "within the “inner html”. Can you elaborate a little more on how I go about that? To be clear, this is using the Hype app right?
I am offline the next few hours - got to pick up my kid - but I will look foreward to your answer. Thanks a lot!

To place code within the inner HTML of a rectangle (or any element), select the element, and select Edit > Edit Inner HTML. You can then paste your code within.

Brilliant, thanks, and I really appreciate the fast response time!!

1 Like

Daniel

It worked fine!
Only problem now is how to make the player appear in the center of the rectangle… Do you know how I can fix that?

Edit: It was actually possible to drag and drop the player to the center position. Problem solved :smile:

1 Like

I cannot look at this at the mo. But I have problems like that be fore and used the text inspector settings to align everything. It may be possible the same trick works with this

Wow, a lot of replies…
I have fixed the windows problem. (for exact, understood why the problem occured)
But cannot fix the problem with Safari.
I have uploaded a mov. / .ogv movie, but when I try on Safari, and click fullscreen. It widens from the spot it is placed. So, for example if I put the video on the middle of the screen, It widens from that spot. So fullscreen actually works when I put the video on the top-right side, since when I click fullscreen, it widens to the bottom-left.

So, to summarize it, fullscreen widens from the spot it is located. Widened by the same ratio with the screen, but the screen is sliced.

That sounds like a scaling issue. but rather than us guess, Can you do as Daniel suggests and post your file post 2.

Failing that and if you don’t want it public , @Daniel may be able to give you a direct way of having the Tumult team take a look at the files that are not public. ( probably a private message)

It appears the Safari and Firefox are using the transform value of the original element as a part of the calculation for where the video appears when in full screen. So if your video element were at the top left corner of your document, it would go into full screen correctly, but if that same video were moved down 100 pixels, you would have a 100 pixel gap at the top in full screen.

The workaround until we can address this issue is to make sure that "Position with CSS left/top" is checked in the document inspector, as this method of positioning elements does not affect videos:

thanks for your help!!
sorry for the late reply