Polymer Change: Host {} dynamisch, wenn html5 Video Vollbild ist

Question

Ist es möglich, die :host von block zu inline dynamisch zu schalten, wenn der Benutzer Fullscreen in HTML5 Video?

Wenn das HTML5 Video Vollbild ist, gibt es nichts auf dem Element selbst, wo ich :host(element-attribute) tun könnte.

Ich kratze mich am Kopf und versuche einen Weg zu finden.

<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> 

Answer 1

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

Siehe auch https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange

(nicht getestet)

Answer 2

Für eine Lösung, habe ich diesen 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); 
    } 

Answer 3

Verwenden Sie einfach den Kunden Element fullscreen_api von https://customelements.io/vguillou/fullscreen-api/

Codebeispiel. Vergessen Sie nicht, das benutzerdefinierte Element herunterzuladen und zu importieren.