Menu icon Foundation
Reveal modal with video on mobile

Hi all,

I was wondering what is the best way to have a good looking reveal modal with a video on mobile.

The thing is, I remove all padding and margin to have only the video floating (on desktop and tablets) and pushed the close-reveal-button outside the reveal area like so :

Screen shot 2014 10 01 at 12.38.00

But when I'm on mobile devices, here's what it looks like :

Img 0158

The reveal takes the whole screen and since the close button is pushed to the right, it adds a horizontal scroll to the page.

What is the best way to fix that?

Moreover, is there a way to open the video fullscreen as the user presses the button that opens the reveal?

Thanks!

revealmodalVideovimeoflex-videomobileFullscreen

Hi all,

I was wondering what is the best way to have a good looking reveal modal with a video on mobile.

The thing is, I remove all padding and margin to have only the video floating (on desktop and tablets) and pushed the close-reveal-button outside the reveal area like so :

Screen shot 2014 10 01 at 12.38.00

But when I'm on mobile devices, here's what it looks like :

Img 0158

The reveal takes the whole screen and since the close button is pushed to the right, it adds a horizontal scroll to the page.

What is the best way to fix that?

Moreover, is there a way to open the video fullscreen as the user presses the button that opens the reveal?

Thanks!

Rafi Benkual about 5 years ago

I think the YouTube embeds are a better way to go.

You can open it as iframe with this html format :

<a class="youtube-media" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque&fs=1">youtube</a>

Notice the &fs=1 to add fullscreen support

Eric Dumensil about 5 years ago

Thanks Rafi

I realized that, on iPhone at least, the videos play automatically in fullscreen.

Now what i'm struggling with is the height of the reveal-modal being set to what appears to be something like 100vh on mobile and it place itself at top:0.

I managed to style it right on desktop and tablets. I must be missing something somewhere but I can't find where.....

Help!

Eric Dumensil about 5 years ago

So,

I managed to do something to fix this :

@media only screen and (max-width:23.438em) and (orientation:portrait){
  .reveal-modal{
    min-height: initial !important;
    top: 150px !important;
  }
}

I know it's not ideal, but It would be great if Foundation would provide an easier and cleaner way to do so.

Another bug en encountered now is touching outside the modal on iPhone doesn't close it. It works on iPad and desktop, but not on iPhone.

Anyone got that problem too?