There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

fullscreen-on

Syntax

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

Put the browser into fullscreen mode.

This works by assigning the target selector to go fullscreen.

If you are building controls for a video player, make sure that you make the wrapping element fullscreen that surrounds both the video and the controls.

Ie. put a div around the video tag and the video controls, and make that fullscreen.

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

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

The #videoPlayerWrapper div tag contains both the controls and the video itself. You want both of these to show fullscreen, so you make the wrapper fullscreen. If you didn't do this and only made the video fullscreen, then you wouldn't see the controls, so you have to have a wrapper around both the player and the controls.

fullscreen-on

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