fullscreen-exit

Syntax

fullscreen-exit: true [every (time)] [after (time)];

Take the browser out of fullscreen mode.

Fullscreen is a mode of the browser itself, so you just set this command to true to exit fullscreen mode.

In the full-blown video player example below, this is the part of the code that takes it out of fullscreen:

.videoFullscreenExit:click {
    fullscreen-exit: true;
}

fullscreen-exit

External video links courtesy of https://archive.org.

Click a link to play.

Popeye Gopher Spinach (1954) Popeye Out to Punch (1956) 1951 Orange Bowl - University of Miami vs Clemson

Play Pause Reload Full screen

.videoListItem:click, .vidButt:click {
    prevent-default: true;
}

.videoListItem:click, #firstVideo:draw {
    #video-title { render: "Now loaded: <strong>{@data-vid-title}</strong>"; }
    #video-external-link { render: "External link: <a href=\"{@data-vid-link}\" target=\"_blank\">{@data-vid-link}</a>"; }
    #videoPlayer { media-control: load "{@data-vid-src}"; }
    #videoSlider { add-class: .hide; }
}

#videoPlayer:loadeddata {
    #videoSlider { set-attribute: max {@#videoPlayer:duration}; remove-class: .hide; set-property: value 0; }
}

#videoSlider:mousedown {
    #videoPlayer { media-control: pause; }
}

#videoSlider:change {
    #videoPlayer { media-control: seek "{@value}", play; }
}

#videoPlayer:timeupdate {
    #videoSlider { set-property: value {@#videoPlayer:currentTime}; }
}

.videoListItem:click {
    #videoPlayer { media-control: play after stack; }
}

.videoButton:click {
    #videoPlayer { media-control: {@data-control}; }
}

.videoFullscreen:click {
    #videoPlayerWrapper { fullscreen-on: true; }
}

.videoFullscreenExit:click {
    fullscreen-exit: true;
}

body:fullscreenEnter {
    .videoFullscreen { add-class: .hide; }
    .videoFullscreenExit { remove-class: .hide; }
}

body:fullscreenExit {
    .videoFullscreenExit { add-class: .hide; }
    .videoFullscreen { remove-class: .hide; }
}

<p>External video links courtesy of <a href="https://archive.org">https://archive.org</a>.</p>
<p>Click a link to play.</p>

<a
    href=""
    id="firstVideo"
    class="videoListItem"
    data-vid-src="https://archive.org/download/Popeye_Gopher_Spinach_1954_871/Popeye_Gopher_Spinach_512kb.mp4"
    data-vid-title="Popeye Gopher Spinach (1954)"
    data-vid-link="https://archive.org/details/Popeye_Gopher_Spinach_1954_871"
    >Popeye Gopher Spinach (1954)
</a>
<a
    href=""
    class="videoListItem"
    data-vid-src="https://archive.org/download/Popeye_Out_of_the_Punch_1956/Popeye_Out_To_Punch_1956_512kb.mp4"
    data-vid-title="Popeye Out to Punch (1956)"
    data-vid-link="https://archive.org/details/Popeye_Out_of_the_Punch_1956"
    >Popeye Out to Punch (1956)
</a>
<a
    href=""
    class="videoListItem"
    data-vid-src="https://archive.org/download/CEP481/CEP481_512kb.mp4"
    data-vid-title="1951 Orange Bowl - University of Miami vs Clemson"
    data-vid-link="https://archive.org/details/CEP481"
    >1951 Orange Bowl - University of Miami vs Clemson
</a>

<div id="videoPlayerWrapper">
    <div>
        <a href="" class="videoButton vidButt" data-control="play">Play</a>
        <a href="" class="videoButton vidButt" data-control="pause">Pause</a>
        <a href="" class="videoButton vidButt" data-control="load">Reload</a>
        <a href="" class="videoFullscreen vidButt">Full screen</a>
        <a href="" class="videoFullscreenExit vidButt hide">Exit full screen</a>
        <input id="videoSlider" class="hide" type="range" min="0" />
    </div>

    <video id="videoPlayer"></video>
</div>

<p id="video-title"></p>
<p id="video-external-link"></p>

.videoListItem {
    display: block;
    margin-bottom: 20px;
}

#videoPlayerWrapper {
    position: relative;
    width: 640px;
    height: 480px;
    max-width: 100%;
}

#videoPlayerWrapper div {
    position: absolute;
    width: 100%;
    z-index: 100;
}

#videoPlayer {
    position: absolute;
    width: 100%;
}

#videoSlider {
    display: block;
    width: 100%;
}

.vidButt, .vidButt:focus {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 5px 10px;
    font-size: 14px;
    background-color: #777;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}

.vidButt:hover, .vidButt:focus {
    background-color: #999;
    color: #fff;
    text-decoration: none;
}

#videoPlayer:fullscreen {
    #videoPlayer {
        height: auto;
    }
}

@media (max-width: 680px) {
    #videoPlayer {
        width: 100%;
        height: 100%;
    }
    #videoSlider {
        width: calc(100% - 40px);
    }
}

Action commands: form-reset Action commands: fullscreen-on