Semantic-ui: Video Fullscreen on Modal

Created on 18 Sep 2015 · 13Comments · Source: Semantic-Org/Semantic-UI

I love SemanticUI ♥ but I have problem about video fullscreen on modal.

Before click fullscreen
2015-09-18_13-26-29

After click fullscreen ( video not show )
2015-09-18_13-26-35

How to fix ? please

Evaluating Bug / Change Needs Test Case stale

Source

markpolarisdesign

👍2

All 13 comments

Perhaps related to using blurred modal? This uses filter() which is a pretty poorly implemented spec

jlukic on 18 Sep 2015

no its not about blur , i still triyng to solve problem , it's occurs this issue on google chrome browser

nicely on 24 Feb 2016

+1 I'm running into this issue. It seems to happen for all embeds within a modal (youtube/vimeo/custom), even if I avoid using the modal component and just put the iframe div in manually. Page content goes above the fullscreen video somehow.

Not working on: Chrome 48.0.2564.116
Works fine on: IE 11.103.10586.0, Firefox 43.0.4

Here is a simple page that will show the problem:

<!doctype html>
<head>
    <title></title>

    <script src="//code.jquery.com/jquery-2.2.1.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">

    <script>
        $(document).ready(function() {
            $('.ui.button').click(function() {
                $('.ui.modal').modal('show');
                $('.ui.embed').embed({ autoplay: true });
            });

        });
    </script>
    <style type="text/css">
        .ui.button {
            margin: 10em;
        }
    </style>
</head>
<body>

<div class="ui button">Show modal</div>
<div class="ui fullscreen modal">
    <i class="close icon"></i>
    <div class="content">
        <div class="ui embed" data-source="vimeo" data-id="125292332"></div>
    </div>
</div>

</body>
</html>

bonnici on 4 Mar 2016

Can you please create a jsfiddle. There's a link to fork in the readme

jlukic on 4 Mar 2016

Looks like the jsfiddle result section is itself in an iframe that doesn't allow fullscreen, so the fullscreen button doesn't show up. You can still see it if you use dev tools to add the allowfullscreen attribute to the iframe manually here: http://jsfiddle.net/bonnici/sqwgLe60/ . I also made a jsbin which allows the output to be directly shared: https://jsbin.com/mipuba .

bonnici on 4 Mar 2016

👍1

igorrarruda on 6 May 2016

Iam developping a site with Semantic UI 2.1.8 and i ran through the same problem as the initial screenshot, only with google Chrome. Works with Firefox and IE. I tried inserting the modal in an additionnal <div class="ui container">, without success. Also tried to play with z-index without results (webkit fullscreen z-index is already at a very high value). Can we have a fix (or a hack until there is a real fix) for this as it can be really critical for sites that rely on video embeds?

drisschelouati on 8 May 2016

Now i use colorbox. It's work for Video Modal
http://www.jacklmoore.com/colorbox/example5/

markpolarisdesign on 9 May 2016

@markpolarisdesign bootstrap modal also works
http://getbootstrap.com/javascript/#modals

igorrarruda on 9 May 2016

@markpolarisdesign @drisschelouati @bonnici @jlukic

I was able to fix this by overriding the css will-change property for the modal to not contain transform. I added this to my own css:

.ui.modal{
    will-change:top, left, margin, opacity;
}

The semantic ui value for the whole thing is:

.ui.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    text-align: left;
    background: #ffffff;
    border: none;
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform-origin: 50% 25%;
    -ms-transform-origin: 50% 25%;
    transform-origin: 50% 25%;
    border-radius: 0.28571429rem;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    will-change: top, left, margin, transform, opacity;
}

bcbane on 15 Sep 2016

Will try that and get back to you! Thanks for the effort!

EDIT: added the same snippet to my css, but it didnt change anything :)

drisschelouati on 15 Sep 2016

👍1

I have a same problem. @bcbane css snippet did not working for me. Is there any kind of trick at all?;

shalomeir on 17 Oct 2016

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.