Polymer Change :host {} dynamically when html5 video is fullscreen -
is possible dynamically switch :host
block
inline
when user hits fullscreen in html5 video?
when html5 video full screen, there nothing on element :host(element-attribute)
.
i'm scratching head trying figure out 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>
<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 https://developer.mozilla.org/en-us/docs/web/events/fullscreenchange
(not tested)
Comments
Post a Comment