<?xml version='1.0' encoding='UTF-8'?><uidget><metadata><name>Video</name><description>Add a Youtube video</description><help><![CDATA[You can choose a video from YouTube, searching by tag or browsing videos of one user.]]></help><api_version>1.0</api_version><size height='170' width='280' /><blog en='14' /></metadata><view><content></content><properties><video_selector default='{id:&apos;-15WHaoweYE&apos;,name:&apos;Sitew.com demo&apos;,width:130,height:97,aspect_ratio:(340/560.0),url:&apos;http://www.youtube.com/v/-15WHaoweYE&apos;,thumbnails:{small:&apos;http://img.youtube.com/vi/-15WHaoweYE/default.jpg&apos;}}' default_action='true' help='Select the YouTube Video to use' icon='folder' name='videoFile' /><bloc><checkbox class='uic_prop_slider_anim' default='false' help='Video width will be adjusted to fit the visitor&apos;s browser.' name='full_width' value='Full screen width' /><checkbox class='ratio' default='true' help='While resizing, constraint the width or height of the video to keep the aspect ratio.' name='aspectRatio' title='' value='Keep the aspect ratio' /><checkbox class='loop' default='false' help='Plays the video again when it ends.' name='loop' title='' value='Loop' /><checkbox class='twitch_chat' default='false' help='Add the chat on the right of streaming video' name='chat' title='' value='Twitch chat' /><checkbox class='auto' default='false' help='Sets whether or not the initial video will autoplay when the player loads.&lt;br&gt;This function works only if you select the mute option or if it is a regular visitor of your website.&lt;br&gt;This function is disabled in the website creation tool.' name='autoPlay' title='' value='Auto-play (only works with mute)' /><checkbox class='auto' default='false' help='Mute video' name='mute' title='' value='Mute' /></bloc></properties><design_properties><bloc><checkbox default='false' help='Add filter' name='filter' title='' value='Color filter' /><gradient class='filter_video' default='[&apos;vertical&apos;, [[&apos;0%&apos;, &apos;rgba(0,0,0,0.5)&apos;], [&apos;100%&apos;, &apos;rgba(0,0,0,0.5)&apos;]], 0, false]' name='gradient_colors' /></bloc></design_properties></view><script>UI_List.UI_Video={initialize:function(t){this.cpt=t
;t.setOptions([&quot;locked&quot;,&quot;container&quot;,&quot;fixed&quot;])},
onDisplay:function(t){this.cpt.migrateOldGradientProperty()
;this.node=t
;this.swf=$(&quot;&lt;div style=&apos;height: 100%&apos;&gt;&lt;/div&gt;&quot;).appendTo(t).hide()
;this.img=$(&quot;&lt;div&gt;&quot;).width(&quot;100%&quot;).height(&quot;100%&quot;).appendTo(t).show()
;this._drawImg()
;this.cpt.data.aspectRatio&amp;&amp;this.cpt.setAspectRatio(this.cpt.H()/this.cpt.W())
;this._setFullWidth();this._setColorFilter()},
onPropertyChanged:function(t){
if(t.include(&quot;aspectRatio&quot;))if(this.cpt.data.aspectRatio){
var i=this.cpt.H()/this.cpt.W();this.cpt.setAspectRatio(i)
;for(var e in v.device_modes)if(e==v.device_modes[e]){
w=this.cpt.prop(e).w;this.cpt.setXYZWH({w:w,h:w*i},{device:e})}
}else this.cpt.setAspectRatio(null)
;if(t.include(&quot;videoFile&quot;)||t.include(&quot;autoPlay&quot;)||t.include(&quot;loop&quot;)||t.include(&quot;full_width&quot;)||t.include(&quot;chat&quot;)){
if(t.include(&quot;full_width&quot;)){this._toggleControls()
;this._setFullWidth()}this._drawImg();this._drawVideo()}
(t.include(&quot;filter&quot;)||t.include(&quot;videoFile&quot;))&amp;&amp;this._toggleControls()
;t.includeOne([&quot;filter&quot;,&quot;gradient_colors&quot;])&amp;&amp;this._setColorFilter()
},onHide:function(){this.swf.hide().empty()},
onRemove:function(){this.swf.hide()},onShow:function(){
this._drawVideo();this._showFlash(!0)},onSelect:function(){
this._toggleControls()},onDeselect:function(){},
onResizeStart:function(){this._showFlash(!1)},
onResize:function(){},onResizeStop:function(){this._drawVideo()
;this._setFullWidth()},onMoveStart:function(){
this._showFlash(!1)},onMoveStop:function(){this._showFlash(!0)
;this._setFullWidth()},onRotateStart:function(){
this._showFlash(!1)},onRotateStop:function(){this._showFlash(!0)
;this._setFullWidth()},_showFlash:function(t){if(t||null==t){
this.swf.show();this.img.hide()}else{this.img.show()
;this.swf.hide()}},_drawImg:function(){
this.cpt.data.videoFile&amp;&amp;this.img.css({
&quot;background-image&quot;:&quot;url(&quot;+this.cpt.data.videoFile.thumbnails.small.replace(&quot;http://&quot;,&quot;https://&quot;)+&quot;)&quot;,
&quot;background-size&quot;:&quot;cover&quot;,&quot;background-position&quot;:&quot;center center&quot;
})},_drawVideo:function(){if(this.cpt.data.videoFile){
this.cpt.data.videoFile.url
;var t=&quot;&quot;,i=this.cpt.data.chat&amp;&amp;&quot;twitch&quot;==this.cpt.data.videoFile.api?parseInt(this.cpt.W()-33.333*this.cpt.W()/100):this.cpt.W(),e=this.cpt.H()
;if(this.cpt.data.full_width){t=&quot;video_cover&quot;
;e=(i=Math.max($(window).width(),deviceController.device_size().width))*e/this.cpt.W()
}this.swf.setVideo(this.cpt.data.videoFile,i,e,{
autoplay:&quot;editor&quot;!=v.mode&amp;&amp;this.cpt.data.autoPlay,
loop:this.cpt.data.loop,&quot;class&quot;:t,muted:!!this.cpt.data.mute})
;this._showFlash();this._drawChat()}},_drawChat:function(){
if(this.cpt.data.chat&amp;&amp;&quot;twitch&quot;==this.cpt.data.videoFile.api){
this.cpt.data.aspectRatio&amp;&amp;this.cpt.setData(&quot;aspectRatio&quot;,!1)
;var t=$(&quot;&lt;div class=&apos;uiv_twitch_chat&apos;&gt;&lt;/div&gt;&quot;).appendTo(this.node)
;t.append(&apos;&lt;iframe frameborder=&quot;0&quot; scrolling=&quot;yes&quot; id=&quot;chat_&apos;+this.cpt.uniqId()+&apos;&quot; src=&quot;https://www.twitch.tv/popout/&apos;+this.cpt.data.videoFile.name.toLocaleLowerCase()+&apos;/chat&quot; height=&quot;&apos;+$(t).height()+&apos;&quot; width=&quot;&apos;+$(t).width()+&apos;&quot;&gt;&lt;/iframe&gt;&apos;)
}else $(&quot;.uiv_twitch_chat&quot;,this.node).remove()},
_setFullWidth:function(){
this.cpt.setFullWidth(this.cpt.data.full_width)},
_toggleControls:function(){
var t=$(this.component.propertyNode).add(this.component.propertyDesignNode)
;$(&quot;.twitch_chat&quot;,t).hide();$(&quot;li.ratio&quot;,t).show()
;this.component.data.full_width?$(&quot;li.ratio, li.loop, li.auto&quot;,t).hide():$(&quot;li.ratio, li.loop, li.auto&quot;,t).show()
;if(this.component.data.filter){$(&quot;.filter_video&quot;,t).show()
;$(&quot;.gradientProperty, .roundSliderPropertyDiv&quot;,t).css(&quot;display&quot;,&quot;table&quot;)
;$(&quot;.selectGradientO.k-widget&quot;,t).show()
;&quot;diagonal&quot;==this.component.data.gradient_colors[0]?$(&quot;.roundSliderPropertyDiv&quot;,t).show():$(&quot;.roundSliderPropertyDiv&quot;,t).hide()
;this._setColorFilter()}else $(&quot;.filter_video&quot;,t).hide()
;if(&quot;twitch&quot;==this.component.data.videoFile.api){
$(&quot;li.loop, li.auto, li.ratio&quot;,t).hide()
;$(&quot;.twitch_chat&quot;,t).show()}
&quot;facebook&quot;==this.component.data.videoFile.api&amp;&amp;$(&quot;li.loop&quot;,t).hide()
},_setColorFilter:function(){
var t=$(this.component.propertyNode).add(this.component.popertyDesignNode),i=&quot;filterColorVideo_&quot;+this.component.uniqId()
;$(&quot;#&quot;+i).remove();if(this.component.data.filter){
this.component.data.gradient_colors[2]=this.component.data.gradient_colors[2]||45
;$(&quot;.wholeGradientProperty&quot;,t).show().children(&quot;:not(.roundSliderPropertyDiv)&quot;).show()
;$(&quot;&lt;div id=&apos;&quot;+i+&quot;&apos; class=&apos;vid_overlay_color&apos;&gt;&lt;/div&gt;&quot;).appendTo(this.component.node.find(&quot;.componentBody&quot;)).setBackgroundGradient(this.component.getData(&quot;gradient_colors&quot;)[1],this.component.data.gradient_colors[0],this.component.data.gradient_colors[2])
}},onDeviceChanged:function(){var t=this;setTimeout(function(){
t._drawImg();t._drawVideo()},500)}}
;UI_List.UI_Video.not_full_screen_cpts=null
;$(document).on(&quot;webkitfullscreenchange&quot;,function(){
console.log(&quot;fullscreenchange&quot;,document.webkitFullscreenElement)
;if(document.webkitFullscreenElement){
UI_List.UI_Video.not_full_screen_cpts=$(&quot;.component:visible&quot;).not($(document.webkitFullscreenElement).closest(&quot;.component&quot;))
;UI_List.UI_Video.not_full_screen_cpts.hide()}else{
UI_List.UI_Video.not_full_screen_cpts.show()
;window.footer&amp;&amp;footer.updateDisplay()}});</script><style>.video_cover{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:0;overflow:hidden}.vid_overlay_color{display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.uiv_twitch_chat{position:absolute;top:0;right:0;bottom:0;width:33.4%}
</style></uidget>