2

Is it possible to dynamically switch the :host from block to inline when the user hits fullscreen in html5 video?

When the html5 video is full screen, there is nothing on the element itself where I could do :host(element-attribute).

I'm scratching my head trying to figure out a way.

<dom-module id="video-player">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        position: relative;
        margin-left: 100%;
      }

      .v-center {
        @apply(--layout-horizontal);
        @apply(--layout-center-center);
        padding-top: 5%;
        background-color: black;
        overflow-y: scroll;
        height: 100%;
      }

      video {
        padding-bottom: 300px;
      }

      video:-webkit-full-screen {
        padding-bottom: 0;
      }

      video:-webkit-full-screen * {
        display: inline;
      }

    </style>
    <iron-media-query query="(max-width: 600px)"
       query-matches="{{smallScreen}}"></iron-media-query>
    <iron-meta id="meta2" key="foo" value="filler"></iron-meta>

    <div class='v-center'  hidden$="{{!smallScreen}}">
      <video width="90%" controls src="{{videoUrl}}"></video>
    </div>
    <div class='v-center'  hidden$="{{smallScreen}}">
      <video width="40%" controls src="{{videoUrl}}"></video>
    </div>
  </template>
dman
  • 10,406
  • 18
  • 102
  • 201

3 Answers3

2
<style>
  :host {
    --host-display: block;
    display: var(--host-display);
    width: 100%;
    position: relative;
    margin-left: 100%;
  }

  <video width="40%" controls src="{{videoUrl}}" 
      on-fullscreenchange="setDisplay"></video>

  setDisplay: function () {
      var display = document.fullscreenEnabled ? 'inline' : 'block';
      this.customStyle['--host-display'] = display;
      this.updateStyles();
  }

See also https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange

(not tested)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I don't think I have access to html5 video api for full screen to run `setDisplay` when the user hits the full screen from the html5 control panel. I might have to work off of the full screen events on the dom, in this which case working outside of the custom element would be easier. – dman Apr 25 '16 at 04:40
  • couldn't get `on-fullscreenchange` to fire. But it may be just a vendor prefix issue. Will have to play with it. I posted the fix I wrote which suffices. – dman Apr 25 '16 at 04:52
  • 1
    Here http://www.intheloftstudios.com/blog/detecting-html5-video-fullscreen-and-events `webkitfullscreenchange` and `mozfullscreenchange` are used but I assumed that all browsers would support this without prefixes by now ... – Günter Zöchbauer Apr 25 '16 at 04:55
  • Here they also use prefixes for reading the current state http://stackoverflow.com/questions/14549547/fullscreenchange-event-not-work. – Günter Zöchbauer Apr 25 '16 at 04:56
0

For a solution, I used this code:

  function html5VideoFix() {
    document.addEventListener("webkitfullscreenchange", function() {
      if (document.webkitIsFullScreen) {
        videoPlayer.style.display = 'inline';
      } else {
        videoPlayer.style.display = 'block';
      } 
    }, false);
    document.addEventListener("mozfullscreenchange", function() {
      if (document.mozFullScreen) {
        videoPlayer.style.display = 'inline';
      } else {
        videoPlayer.style.display = 'block';
      } 
    }, false);
  }
dman
  • 10,406
  • 18
  • 102
  • 201
0

Simply use the customer element fullscreen_api from https://customelements.io/vguillou/fullscreen-api/

Code example. Don't forget to download and import the custom element.

<template is="dom-bind">
    <fullscreen-api id="fsapi" fullscreen-available="{{fullscreenAvailable}}"></fullscreen-api>`enter code here`

    <button type="button" onclick="goFullscreen()" hidden$="[[!fullscreenAvailable]]">Display this page in full screen mode</button>

    <div id="errorDiv" hidden$="[[fullscreenAvailable]]">
        Your browser does not support the HTML5 full screen API... :(
    </div>
</template>

<script>
    function goFullscreen() {
      var fsapi = document.querySelector('#fsapi');
      fsapi.toggleFullscreen();
    }
</script>
user586539
  • 1