Search completed in 1.09 seconds.
Fullscreen API - Web APIs
the
fullscreen api adds methods to present a specific element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed.
... see the article guide to the
fullscreen api for details on how to use the api.
...you may wish to consider using a library such as fscreen for vendor agnostic access to the
fullscreen api.
...And 51 more matches
Guide to the Fullscreen API - Web APIs
this article demonstrates how to use the
fullscreen api to place a given element into full-screen mode, as well as how to detect when the browser enters or exits full-screen mode.
... activating full-screen mode given an element that you'd like to present in full-screen mode (such as a <video>, for example), you can present it in full-screen mode by simply calling its request
fullscreen() method.
... let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.request
fullscreen) { elem.request
fullscreen(); } this code checks for the existence of the request
fullscreen() method before calling it.
...And 40 more matches
Element.requestFullscreen() - Web APIs
the element.request
fullscreen() method issues an asynchronous request to make the element be displayed in full-screen mode.
...if permission to enter full screen mode is granted, the returned promise will resolve and the element will receive a
fullscreenchange event to let it know that it's now in full screen mode.
... if permission is denied, the promise is rejected and the element receives a
fullscreenerror event instead.
...And 13 more matches
Element: fullscreenchange event - Web APIs
the
fullscreenchange event is fired immediately after an element switches into or out of full-screen mode.
... bubbles yes cancelable no interface event event handler property on
fullscreenchange this event is sent to the element which is transitioning into or out of full-screen mode.
... examples in this example, a handler for the
fullscreenchange event is added to the element whose id is
fullscreen-div.
...And 10 more matches
Feature-Policy: fullscreen - HTTP
the http feature-policy header
fullscreen directive controls whether the current document is allowed to use element.request
fullscreen().
... by default, top-level documents and their same-origin child frames can request and enter
fullscreen mode.
... this directive allows or prevents cross-origin frames from using
fullscreen mode.
...And 9 more matches
Document: fullscreenchange event - Web APIs
the
fullscreenchange event is fired immediately after the browser switches into or out of full-screen mode.
... bubbles yes cancelable no interface event event handler property on
fullscreenchange the event is sent to the element that is transitioning into or out of full-screen mode, and this event then bubbles up to the document.
... to find out whether the element is entering or exiting full-screen mode, check the value of documentorshadowroot.
fullscreenelement: if this value is null then the element is exiting full-screen mode, otherwise it is entering full-screen mode.
...And 4 more matches
Document.fullscreen - Web APIs
the obsolete document interface's
fullscreen read-only property reports whether or not the document is currently displaying content in full-screen mode.
... note: since this property is deprecated, you can determine if full-screen mode is active on the document by checking to see if document.
fullscreenelement is not null.
... syntax var is
fullscreen = document.
fullscreen; value a boolean value which is true if the document is currently displaying an element in full-screen mode; otherwise, the value is false.
...And 3 more matches
Document.onfullscreenerror - Web APIs
the document.on
fullscreenerror property is an event handler for the
fullscreenerror event that is sent to the document when it fails to transition into full-screen mode after a prior call to element.request
fullscreen().
... syntax targetdocument.on
fullscreenerror =
fullscreenerrorhandler; value an event handler for the
fullscreenerror event.
... example this example attempts to call request
fullscreen() outside of an event handler.
...And 3 more matches
Element.onfullscreenchange - Web APIs
the element interface's on
fullscreenchange property is an event handler for the
fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode.
... syntax targetdocument.on
fullscreenchange =
fullscreenchangehandler; value an event handler for the
fullscreenchange event, indicating that the element has changed in or out of full-screen mode.
... example this example establishes a
fullscreenchange event handler, handle
fullscreenchange().
...And 3 more matches
:fullscreen - CSS: Cascading Style Sheets
the :
fullscreen css pseudo-class matches every element which is currently in full-screen mode.
... syntax :
fullscreen usage notes the :
fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
... html the page's html looks like this: <h1>mdn web docs demo: :
fullscreen pseudo-class</h1> <p>this demo uses the <code>:
fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle
fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
...And 3 more matches
Document.exitFullscreen() - Web APIs
the document method exit
fullscreen() requests that the element on this document which is currently being presented in full-screen mode be taken out of full-screen mode, restoring the previous state of the screen.
... this usually reverses the effects of a previous call to element.request
fullscreen().
... syntax exitpromise = document.exit
fullscreen(); parameters none.
...And 2 more matches
Document.fullscreenEnabled - Web APIs
the read-only
fullscreenenabled property on the document interface indicates whether or not full-screen mode is available.
... full-screen mode is available only for a page that has no windowed plug-ins in any of its documents, and if all <iframe> elements which contain the document have their allow
fullscreen attribute set.
... syntax var is
fullscreenavailable = document.
fullscreenenabled; value a boolean value which is true if the document and the elements within can be placed into full-screen mode by calling element.request
fullscreen().
...And 2 more matches
FullscreenOptions.navigationUI - Web APIs
the
fullscreenoptions dictionary's navigationui property is used when calling request
fullscreen() to specify to what extent the user agent should include its standard user interface while the element is presented in full-screen mode.
... syntax let
fullscreenoptions = { navigationui: value }; value the value of the navigationui property must be one of the following strings.
... example in this example, the entire document is placed into full-screen mode by calling request
fullscreen() on the document's document.documentelement, which is the document's root <html> element.
...And 2 more matches
Window.fullScreen - Web APIs
the
fullscreen property of the window interface indicates whether the window is displayed in full screen mode or not.
... syntax isin
fullscreen = windowref.
fullscreen; with chrome privileges, the property is read-write, otherwise it is read-only.
... return value isin
fullscreen a boolean.
...And 2 more matches
Document: fullscreenerror event - Web APIs
the
fullscreenerror event is fired when the browser cannot switch to full-screen mode.
... bubbles yes cancelable no interface event event handler property on
fullscreenerror as with the
fullscreenchange event, two
fullscreenerror events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which owns that element.
... for some reasons that switching into full-screen mode might fail, see the guide to the
fullscreen api.
... examples const requestor = document.queryselector('div'); document.addeventlistener('
fullscreenerror', (event) => { console.error('an error occurred changing into
fullscreen'); console.log(event); }); requestor.request
fullscreen(); specifications specification status
fullscreen api living standard ...
Document.onfullscreenchange - Web APIs
the document interface's on
fullscreenchange property is an event handler for the
fullscreenchange event that is fired immediately before a document transitions into or out of full-screen mode.
... syntax targetdocument.on
fullscreenchange =
fullscreenchangehandler; value an event handler which is invoked whenever the document receives a
fullscreenchange event, indicating that the document is transitioning into or out of full-screen mode.
... usage notes the
fullscreenchange event does not directly specify whether the transition is into or out of full-screen mode, so your event handler should look at the value of document.
fullscreenelement.
... example document.on
fullscreenchange = function ( event ) { console.log("full screen change") }; document.documentelement.onclick = function () { // request
fullscreen() must be in an event handler or it will fail document.documentelement.request
fullscreen(); } specifications specification status comment
fullscreen apithe definition of 'on
fullscreenchange' in that specification.
DocumentOrShadowRoot.fullscreenElement - Web APIs
the documentorshadowroot.
fullscreenelement read-only property returns the element that is currently being presented in full-screen mode in this document, or null if full-screen mode is not currently in use.
... syntax var element = document.
fullscreenelement; return value the element object that's currently in full-screen mode; if full-screen mode isn't currently in use by the document>, the returned value is null.
... example this example presents a function, isvideoin
fullscreen(), which looks at the value returned by
fullscreenelement; if the document is in full-screen mode (
fullscreenelement isn't null) and the full-screen element's nodename is video, indicating a <video> element, the function returns true, indicating that the video is in full-screen mode.
... function isvideoin
fullscreen() { if (document.
fullscreenelement && document.
fullscreenelement.nodename == 'video') { return true; } return false; } specifications specification status comment
fullscreen apithe definition of 'document.
fullscreenelement' in that specification.
Element: fullscreenerror event - Web APIs
the
fullscreenerror event is fired when the browser cannot switch to full-screen mode.
... bubbles yes cancelable no interface event event handler property on
fullscreenerror as with the
fullscreenchange event, two
fullscreenerror events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which contains that element.
... for some reasons that switching into full-screen mode might fail, see the guide to the
fullscreen api.
... examples const requestor = document.queryselector('div'); requestor.addeventlistener('
fullscreenerror', (event) => { console.error('an error occurred changing into
fullscreen'); console.log(event); }); requestor.request
fullscreen(); specifications specification status
fullscreen api living standard ...
Element.onfullscreenerror - Web APIs
the element interface's on
fullscreenerror property is an event handler for the
fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode.
... syntax targetelement.on
fullscreenerror =
fullscreenerrorhandler; value an error handler for the
fullscreenerror event.
...since full-screen mode changes are only permitted in response to a user input, this causes an error to occur, which triggers the delivery of the
fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.on
fullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen mode."); }; //....
... elem.request
fullscreen(); specifications specification status comment
fullscreen apithe definition of 'on
fullscreenerror' in that specification.
fullscreenbutton - Archive of obsolete content
« xul reference home
fullscreenbutton type: boolean set this attribute to true to display a button in the window chrome to allow the user to switch the window into full screen mode.
...the window receives a "
fullscreen" event once the change has been made.
FullscreenOptions - Web APIs
the
fullscreenoptions dictionary is used to provide configuration options when calling request
fullscreen() on an element to place that element into full-screen mode.
Creating a cross-browser video player - Developer guides
this article describes a simple html5 video player that uses the media and
fullscreen apis and works across most major desktop and mobile browsers.
... as well as working
fullscreen, the player features custom controls rather than just using the browser defaults.
... <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allow
fullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the l...
...And 18 more matches
Index - Web APIs
909 document.exit
fullscreen() api, dom, document, full, full-screen,
fullscreen api, method, reference, exit
fullscreen,
fullscreen, screen the document method exit
fullscreen() requests that the element on this document which is currently being presented in full-screen mode be taken out of full-screen mode, restoring the previous state of the screen.
... 915 document.
fullscreen api, deprecated, document, full-screen,
fullscreen api, property, read-only, reference,
fullscreen, screen the obsolete document interface's
fullscreen read-only property reports whether or not the document is currently displaying content in full-screen mode.
... 916 document.
fullscreenenabled api, document, full-screen,
fullscreen api, property, read-only, reference,
fullscreen,
fullscreenenabled, screen the read-only
fullscreenenabled property on the document interface indicates whether or not full-screen mode is available.
...And 16 more matches
Element - Web APIs
event handlers element.on
fullscreenchange an event handler for the
fullscreenchange event, which is sent when the element enters or exits full-screen mode.
... element.on
fullscreenerror an event handler for the
fullscreenerror event, which is sent when an error occurs while attempting to change into full-screen mode.
... element.request
fullscreen() asynchronously asks the browser to make the element full-screen.
...And 6 more matches
Document - Web APIs
document.
fullscreenelementread only the element that's currently in full screen mode for this document.
... document.on
fullscreenchange is an eventhandler representing the code to be called when the
fullscreenchange event is raised.
... document.on
fullscreenerror is an eventhandler representing the code to be called when the
fullscreenerror event is raised.
...And 5 more matches
Event reference
view events event name fired when
fullscreenchange an element was toggled to or from
fullscreen mode.
...
fullscreenerror it was impossible to switch to
fullscreen mode for technical reasons or because the permission was denied.
...
fullscreenchange event full screen an element was toggled to or from
fullscreen mode.
...And 4 more matches
Index - Developer guides
7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.
fullscreen apis, and also at how to style the player.
... 8 creating a cross-browser video player apps, html5, video, full screen this article describes a simple html5 video player that uses the media and
fullscreen apis and works across most major desktop and mobile browsers.
... as well as working
fullscreen, the player features custom controls rather than just using the browser defaults.
...And 3 more matches
User input and controls - Developer guides
relevant apis and events include touch events, pointer lock api, screen orientation api,
fullscreen api, drag & drop and more.
...and the
fullscreen api helps you in displaying your app in
fullscreen mode.
...
fullscreen you might need to present an element of your application (such as a <video>, for example) in
fullscreen mode.
...And 3 more matches
Obsolete features - Web APIs
fullscreen this feature no longer works in msie 6 sp2 the way it worked in msie 5.x.
... the windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when
fullscreen is enabled in msie 5.x.
...
fullscreen always upsets users with large monitor screen or with dual monitor screen.
...And 2 more matches
Video player styling basics - Developer guides
in the previous cross browser video player article we described how to build a cross-browser html5 video player using the media and
fullscreen apis.
...class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-
fullscreen">
fullscreen</button> </div> related css alteration the previous article simply set the display property of the video controls to block in order to display them.
... this has now been changed to use a data-state attribute, which this code already uses to handle its
fullscreen implementation.
...it now also needs to take into account the offset position of the parent element: progress.addeventlistener('click', function(e) { var pos = (e.pagex - (this.offsetleft + this.offsetparent.offsetleft)) / this.offsetwidth; video.currenttime = pos * video.duration; });
fullscreen the
fullscreen implemention hasn't changed.
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar,
fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
...
fullscreenbutton type: boolean set this attribute to true to display a button in the window chrome to allow the user to switch the window into full screen mode.
...the window receives a "
fullscreen" event once the change has been made.
From object to iframe — other embedding technologies - Learn web development
}); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allow
fullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allow
fullscreen>\n</iframe>'; let solutionentry = htmlsolution...
...say you wanted to include the mdn glossary on one of your web pages — you could try something like this: <iframe src="https://udn.realityripple.com/docs/glossary" width="100%" height="500" frameborder="0" allow
fullscreen sandbox> <p> <a href="https://udn.realityripple.com/docs/glossary"> fallback link for browsers that don't support iframes </a> </p> </iframe> this example includes the basic essentials needed to use an <iframe>: allow
fullscreen if set, the <iframe> is able to be placed in
fullscreen mode using the full screen api (somewhat beyond scope for this article.) frameborder if s...
... here's an example that uses the <embed> element to embed a flash movie (see this live on github, and check the source code too): <embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowscriptaccess="samedomain" allow
fullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> pretty horrible, isn't it?
Viewport concepts - CSS: Cascading Style Sheets
the size of the viewport depends on the size of the screen, whether the browser is in
fullscreen mode or not, and whether or not the user zoomed in.
... on most mobile devices and when the browser is in
fullscreen mode, the viewport is the entire screen.
... in
fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
v> safari list-button div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>lorem</div> safari datalist listitem div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; } <div>lorem</div> firefox chrome safari edge media-enter-
fullscreen-button div{ color: black; -webkit-appearance: media-enter-
fullscreen-button; } <div>lorem</div> chrome safari media-exit-
fullscreen-button div{ color: black; -webkit-appearance: media-exit-
fullscreen-button; } <div>lorem</div> chrome safari media-
fullscreen-volume-slider div{ color: black; -m...
...oz-appearance: media-
fullscreen-volume-slider; -webkit-appearance: media-
fullscreen-volume-slider; } <div>lorem</div> safari media-
fullscreen-volume-slider-thumb div{ color: black; -moz-appearance: media-
fullscreen-volume-slider-thumb; -webkit-appearance: media-
fullscreen-volume-slider-thumb; } <div>lorem</div> safari media-mute-button div{ color: black; -webkit-appearance: media-mute-button; } <div>lorem</div> chrome safari edge media-play-button div{ color: black; -webkit-appearance: media-play-button; } <div>lorem</div> chrome safari edge media-overlay-play-button div{ color: black; -webkit-appearance: media-overlay...
...ound div{ color: black; -webkit-appearance: media-controls-background; } <div>lorem</div> chrome safari media-controls-dark-bar-background div{ color: black; -moz-appearance: media-controls-dark-bar-background; -webkit-appearance: media-controls-dark-bar-background; } <div>lorem</div> safari media-controls-
fullscreen-background div{ color: black; -webkit-appearance: media-controls-
fullscreen-background; } <div>lorem</div> chrome safari media-controls-light-bar-background div{ color: black; -moz-appearance: media-controls-light-bar-background; -webkit-appearance: media-controls-light-bar-background; } <div>lorem</div> safari ...
Add to Home screen - Progressive web apps (PWAs)
tapping this icon opens it up, but as a
fullscreen app, you'll no longer see the browser ui around it.
...to make it feel like a distinct app (and not just a web page), you should choose a value such as
fullscreen (no ui is shown at all) or standalone (very similar, but system-level ui elements such as the status bar might be visible).
...hey, at least it isn't cats.", "display": "
fullscreen", "icons": [ { "src": "icon/fox-icon.png", "sizes": "192x192", "type": "image/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app.
How to make PWAs installable - Progressive web apps (PWAs)
this makes the web app easier to access; additionally, you can specify that the app be launched in
fullscreen or standalone mode, thus removing the default browser user interface that would otherwise be present, creating an even more seamless and native-like feel.
... { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "
fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app.
... display: how the app is displayed; can be
fullscreen, standalone, minimal-ui, or browser.
Common Firefox theme issues and solutions - Archive of obsolete content
@media all and (-moz-windows-compositor) { /* make transition to
fullscreen mode seamlessly in firefox 10+ */ #main-window[in
fullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
... html 5 media control bar is missing full screen button the
fullscreen icon is missing from the html5 video control bar.
HTMLIFrameElement - Web APIs
htmliframeelement.allow
fullscreen is a boolean indicating whether the inline frame is willing to be placed into full screen mode.
... living standard the following property has been added: allow
fullscreen.
Web APIs
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing api
fullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermission...
...licy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent
fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcon...
::backdrop - CSS: Cascading Style Sheets
this includes both elements which have been placed in full-screen mode using the
fullscreen api and <dialog> elements.
... specifications specification status comment
fullscreen apithe definition of '::backdrop' in that specification.
display-mode - CSS: Cascading Style Sheets
display mode description fallback display mode
fullscreen all of the available display area is used and no user agent chrome is shown.
... (none) examples @media all and (display-mode:
fullscreen) { body { margin: 0; border: 5px solid black; } } specifications specification status comment web app manifestthe definition of 'display-mode' in that specification.
Pseudo-classes - CSS: Cascading Style Sheets
index of standard pseudo-classes :active :any-link :blank :checked :current :default :defined :dir() :disabled :drop :empty :enabled :first :first-child :first-of-type :
fullscreen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :plac...
...eholder-shown :read-only :read-write :required :right :root :scope :state() :target :target-within :user-invalid :valid :visited :where() specifications specification status comment
fullscreen api living standard defined :
fullscreen.
Adding captions and subtitles to HTML5 video - Developer guides
in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.
fullscreen apis, and also at how to style the player.
...class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-
fullscreen">
fullscreen</button> <button id="subtitles" type="button" data-state="subtitles">cc</button> </div> css changes the video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.
Feature Policy - HTTP
allow iframes to use the
fullscreen api.
... the features include (see features list): accelerometer ambient light sensor autoplay camera encrypted media
fullscreen geolocation gyroscope magnetometer microphone midi paymentrequest picture-in-picture usb vr / xr examples using feature policy see feature policy demos for example usage of many policies.
display - Web app manifests
the display mode changes how much of browser ui is shown to the user and can range from browser (when the full browser window is shown) to
fullscreen (when the app is full-screened).
... values the possible values are: display mode description fallback display mode
fullscreen all of the available display area is used and no user agent chrome is shown.
Autoplay guide for media and Web Audio APIs - Web media technologies
example: allowing autoplay only from the document's domain to use the feature-policy header to only allow media to autoplay from the document's origin: feature-policy: autoplay 'self' to do the same for an <iframe>: <iframe src="mediaplayer.html" allow="autoplay 'src'"> </iframe> example: allowing autoplay and
fullscreen mode adding
fullscreen api permission to the previous example results in a feature-policy header like the following if
fullscreen access is allowed regardless of the domain; a domain restriction can be added as well as needed.
... feature-policy: autoplay 'self';
fullscreen the same permissions, grated using the <iframe> element's allow property, look like this: <iframe src="mediaplayer.html" allow="autoplay 'src';
fullscreen"> </iframe> example: allowing autoplay from specific sources the feature-policy header to allow media to be played from both the document's (or <iframe>'s) own domain and https://example.media looks like this: feature-policy: autoplay 'self' https://example.media an <iframe> can be written to specify that this autoplay policy should be applied to itself and any child frames would be written thusly: <iframe width="300" height="200" src="mediaplayer.html" allow="autoplay 'src' https://example.media"> </iframe> example: disabling autoplay setting the autoplay feature pol...
Miscellaneous - Archive of obsolete content
window.addeventlistener('
fullscreen', function(){ alert('
fullscreen mode on or off') }, false) getting addon install path first one using addon manager: components.utils.import('resource://gre/modules/addonmanager.jsm'); addonmanager.getaddonbyid('example@addon', function(addon) { let path = addon.getresourceuri().path; // something like /home/username/....
NPFullPrint - Archive of obsolete content
syntax typedef struct _npfullprint { npbool pluginprinted; /* true: print
fullscreen */ npbool printone; /* true: print one copy */ /* to default printer */ void* platformprint; /* platform-specific */ } npfullprint; fields the data structure has the following fields: pluginprinted determines whether the plug-in prints in full-page mode.
Visual typescript game engine - Game development
[ { name: "cache", enabled: true, scriptpath: "externals/cacheinit.ts", }, { name: "hackertimer", enabled: true, scriptpath: "externals/hack-timer.js", }, { name: "dragging", enabled: true, scriptpath: "externals/drag.ts", }, ]; /** * @description this is main coordinary types of positions * can be "diametric-
fullscreen" or "frame".
Document and website structure - Learn web development
basic sections of a document webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a
fullscreen video or game, is part of some kind of art project, or is just badly structured: header: usually a big strip across the top with a big heading, logo, and perhaps a tagline.
nsIDOMWindowInternal
fullscreen boolean whether the window is displayed in full screen mode or not frameelement nsidomelement readonly: the element in which the window is embedded, or null if the window is top-level.
DocumentOrShadowRoot - Web APIs
documentorshadowroot.
fullscreenelementread only returns the element that's currently in full screen mode for this document.
EventTarget.addEventListener() - Web APIs
for example, an event handler callback that can be used to handle both
fullscreenchange and
fullscreenerror might look like this: function eventhandler(event) { if (event.type == '
fullscreenchange') { /* handle a full screen toggle */ } else /*
fullscreenerror */ { /* handle a full screen toggle error */ } } safely detecting option support in older versions of the dom specification, the third parameter of addeventlistener() was a boolean value indicating wheth...
HTMLMediaElement - Web APIs
the domtokenlist takes one or more of three possible values: nodownload, no
fullscreen, and noremoteplayback.
Pointer Lock API - Web APIs
requestpointerlock() the pointer lock api, similar to the
fullscreen api, extends dom elements by adding a new method, requestpointerlock().
Screen - Web APIs
methods screen.lockorientation lock the screen orientation (only works in
fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in
fullscreen or for installed apps) methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget.
Window - Web APIs
window.
fullscreen this property indicates whether the window is displayed in full screen or not.
CSS reference - CSS: Cascading Style Sheets
ont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:
fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@...
WebKit CSS extensions - CSS: Cascading Style Sheets
::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-
fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-webkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-ba...
Guide to Web APIs - Developer guides
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing api
fullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermission...
HTML5 - Developer guides
fullscreen api controls the usage of the whole screen for a web page or application, without the browser ui displayed.
Using Feature Policy - HTTP
for example, allow all browsing contexts within this iframe to use
fullscreen: <iframe src="https://example.com..." allow="
fullscreen"></iframe> this is equivalent to: <iframe src="https://example.com..." allow="
fullscreen 'src'"></iframe> this example allows <iframe> content on a particular origin to access the user's location: <iframe src="https://google-developers.appspot.com/demos/..." allow="geolocation https://google-developers.appspot.com"></iframe> s...
Feature-Policy - HTTP
fullscreen controls whether the current document is allowed to use element.request
fullscreen().
Index - HTTP
67 feature-policy:
fullscreen feature policy, feature-policy, http,
fullscreen, header the http feature-policy header
fullscreen directive controls whether the current document is allowed to use element.request
fullscreen().
HTTP Index - HTTP
131 feature-policy:
fullscreen feature policy, feature-policy, http,
fullscreen, header the http feature-policy header
fullscreen directive controls whether the current document is allowed to use element.request
fullscreen().