ポリマー変更：html5動画がフルスクリーンのときにホスト{}が動的に変更されます

Question

:hostをblockからinlineに動的に切り替えることはできますか？

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

単にhttps://customelements.io/vguillou/fullscreen-api/

コード例から顧客要素fullscreen_apiを使用しています。カスタム要素をダウンロードしてインポートすることを忘れないでください。