<?xml version='1.0' encoding='UTF-8'?><uidget><metadata><name>Vidéo</name><api_version>1.0</api_version><size height='170' width='280' /><blog en='14' /></metadata><view><content></content><properties><video_selector default='{id:&apos;wyJ7uyN7MJ8&apos;,name:&apos;Sitew.com demo&apos;,width:130,height:97,aspect_ratio:(340/560.0),url:&apos;http://www.youtube.com/v/wyJ7uyN7MJ8&apos;,thumbnails:{small:&apos;http://img.youtube.com/vi/wyJ7uyN7MJ8/default.jpg&apos;}}' default_action='true' help='Sélection de la vidéo YouTube à utiliser' icon='folder' name='videoFile' /><checkbox class='uic_prop_slider_anim' default='false' help='La largeur de la vidéo sera ajustée à celle du navigateur de l&apos;internaute.' name='full_width' value='Pleine largeur d&apos;écran' /><checkbox class='ratio' default='true' help='Pendant les redimensionnements, contraint la hauteur et la largeur de la vidéo pour que la taille reste proportionnelle à l&apos;originale.' name='aspectRatio' title='' value='Conserver les proportions' /><checkbox class='loop' default='false' help='Rejoue la vidéo une fois qu&apos;elle est terminée.' name='loop' title='' value='En boucle' /><checkbox class='twitch_chat' default='false' help='Ajoute le chat à droite du streaming' name='chat' title='' value='Chat Twitch' /><checkbox class='auto' default='false' help='Définit si au chargement du lecteur la vidéo est démarrée automatiquement.&lt;br&gt;Cette fonctionnalité ne fonctionne pas sur tous les navigateurs et appareils.&lt;br&gt;Cette fonctionnalité est désactivée dans l&apos;outil de création de site.' name='autoPlay' title='' value='Lecture automatique si supporté' /></properties><design_properties><checkbox default='false' help='Ajouter un filtre' name='filter' title='' value='Filtre de couleur' /><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' /></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=this.cpt.node.find(&quot;div&quot;).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});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>