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
.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);
}
}