<?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' /><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 does not work on all browsers and devices.&lt;br&gt;This function is disabled in the website creation tool.' name='autoPlay' title='' value='Auto-play if supported' /></properties><design_properties><checkbox default='false' help='Add filter' name='filter' title='' value='Color filter' /><gradient class='filter_video' default='[&apos;vertical&apos;,&apos;50%!rgba(0,0,0,0.5)&apos;]' name='gradient_colors' /></design_properties></view><script>UI_List.UI_Video={initialize:function(a){this.cpt=a;
a.setOptions([&quot;locked&quot;,&quot;container&quot;,&quot;fixed&quot;])
},onDisplay:function(a){this.cpt.migrateOldGradientProperty();
this.node=a;
this.swf=$(&quot;&lt;div style=&apos;height: 100%&apos;&gt;&lt;/div&gt;&quot;).appendTo(a).hide();
this.img=$(&quot;&lt;div&gt;&quot;).width(&quot;100%&quot;).height(&quot;100%&quot;).appendTo(a).show();
this._drawImg();
if(this.cpt.data.aspectRatio){this.cpt.setAspectRatio(this.cpt.H()/this.cpt.W())
}this._setFullWidth();
this._setColorFilter()
},onPropertyChanged:function(a){if(a.include(&quot;aspectRatio&quot;)){if(this.cpt.data.aspectRatio){var b=this.cpt.H()/this.cpt.W();
this.cpt.setAspectRatio(b);
for(var c in v.device_modes){if(c==v.device_modes[c]){w=this.cpt.prop(c).w;
this.cpt.setXYZWH({w:w,h:w*b},{device:c})
}}}else{this.cpt.setAspectRatio(null)
}}if(a.include(&quot;videoFile&quot;)||a.include(&quot;autoPlay&quot;)||a.include(&quot;loop&quot;)||a.include(&quot;full_width&quot;)||a.include(&quot;chat&quot;)){if(a.include(&quot;full_width&quot;)){this._toggleControls();
this._setFullWidth()
}this._drawImg();
this._drawVideo()
}if(a.include(&quot;filter&quot;)||a.include(&quot;videoFile&quot;)){this._toggleControls()
}if(a.includeOne([&quot;filter&quot;,&quot;gradient_colors&quot;])){this._setColorFilter()
}},onHide:function(){this.swf.hide().empty()
},onRemove:function(){this.swf.hide()
},onShow:function(){this._drawVideo();
this._showFlash(true)
},onSelect:function(){this._toggleControls()
},onDeselect:function(){},onResizeStart:function(){this._showFlash(false)
},onResize:function(){},onResizeStop:function(){this._drawVideo();
this._setFullWidth()
},onMoveStart:function(){this._showFlash(false)
},onMoveStop:function(){this._showFlash(true);
this._setFullWidth()
},onRotateStart:function(){this._showFlash(false)
},onRotateStop:function(){this._showFlash(true);
this._setFullWidth()
},_showFlash:function(a){if(a||a==null){this.swf.show();
this.img.hide()
}else{this.img.show();
this.swf.hide()
}},_drawImg:function(){if(this.cpt.data.videoFile){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){var b=this.cpt.data.videoFile.url,e=&quot;&quot;,a=this.cpt.data.chat&amp;&amp;this.cpt.data.videoFile.api==&quot;twitch&quot;?parseInt(this.cpt.W()-((this.cpt.W()*33.333)/100)):this.cpt.W(),d=this.cpt.H();
if(this.cpt.data.full_width){e=&quot;video_cover&quot;;
a=this.cpt.node.find(&quot;div&quot;).width();
d=a*d/this.cpt.W()
}this.swf.setVideo(this.cpt.data.videoFile,a,d,{autoplay:(v.mode!=&quot;editor&quot;&amp;&amp;this.cpt.data.autoPlay),loop:this.cpt.data.loop,&quot;class&quot;:e});
this._showFlash();
this._drawChat()
}},_drawChat:function(){if(this.cpt.data.chat&amp;&amp;this.cpt.data.videoFile.api==&quot;twitch&quot;){if(this.cpt.data.aspectRatio){this.cpt.setData(&quot;aspectRatio&quot;,false)
}var a=$(&quot;&lt;div class=&apos;uiv_twitch_chat&apos;&gt;&lt;/div&gt;&quot;).appendTo(this.node);
a.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;+$(a).height()+&apos;&quot; width=&quot;&apos;+$(a).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 a=$(this.component.propertyNode).add(this.component.propertyDesignNode);
$(&quot;.twitch_chat&quot;,a).hide();
$(&quot;li.ratio&quot;,a).show();
if(this.component.data.full_width){$(&quot;li.ratio, li.loop, li.auto&quot;,a).hide()
}else{$(&quot;li.ratio, li.loop, li.auto&quot;,a).show()
}if(this.component.data.filter){$(&quot;.filter_video&quot;,a).show();
$(&quot;.gradientProperty, .roundSliderPropertyDiv&quot;,a).css(&quot;display&quot;,&quot;table&quot;);
$(&quot;.selectGradientO.k-widget&quot;,a).show();
this.component.data.gradient_colors[0]==&quot;diagonal&quot;?$(&quot;.roundSliderPropertyDiv&quot;,a).show():$(&quot;.roundSliderPropertyDiv&quot;,a).hide();
this._setColorFilter()
}else{$(&quot;.filter_video&quot;,a).hide()
}if(this.component.data.videoFile.api==&quot;twitch&quot;){$(&quot;li.loop, li.auto, li.ratio&quot;,a).hide();
$(&quot;.twitch_chat&quot;,a).show()
}if(this.component.data.videoFile.api==&quot;facebook&quot;){$(&quot;li.loop&quot;,a).hide()
}},_setColorFilter:function(){var b=$(this.component.propertyNode).add(this.component.popertyDesignNode);
var a=&quot;filterColorVideo_&quot;+this.component.uniqId();
$(&quot;#&quot;+a).remove();
if(this.component.data.filter){this.component.data.gradient_colors[2]=this.component.data.gradient_colors[2]||45;
$(&quot;.wholeGradientProperty&quot;,b).show().children(&quot;:not(.roundSliderPropertyDiv)&quot;).show();
$(&quot;&lt;div id=&apos;&quot;+a+&quot;&apos; class=&apos;vid_overlay_color&apos;&gt;&lt;/div&gt;&quot;).appendTo(this.component.node.find(&quot;.componentBody&quot;)).setBackgroundGradient(this.component.data.gradient_colors[1],this.component.data.gradient_colors[0],this.component.data.gradient_colors[2])
}},onDeviceChanged:function(){var a=this;
setTimeout(function(){a._drawImg();
a._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()
}});</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>