Polymer Change: host {} динамически, когда html5 видео полноэкранный

Question

Можно ли динамически переключать :host с block на inline, когда пользователь нажимает полноэкранный режим в видео html5?

Когда видео html5 полноэкранное, ничего нет на самом элементе, где я мог бы сделать :host(element-attribute).

Я почесываю голову, пытаясь выяснить путь.

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

Смотри также https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange

(не тестировалось)

Answer 2

Для решения, я использовал этот код:

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

Просто используйте элемент клиента fullscreen_api из https://customelements.io/vguillou/fullscreen-api/

Пример кода. Не забудьте загрузить и импортировать пользовательский элемент.

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