Difference between revisions of "Widget:Snippet"

From HaloRuns Wiki
Jump to: navigation, search
Line 1: Line 1:
 
<noinclude>
 
<noinclude>
This allows you to embed MP4 videos as if they were a normal GIF.
+
This allows you to embed MP4 videos as if they were a normal GIF.
You use it like this;
+
You use it like this;
  
<code>
+
<code>
<nowiki>
+
<nowiki>
{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|width=300|height=300}}
+
{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|width=300|height=300}}
</nowiki>
+
</nowiki>
</code>
+
</code>
  
Where you replace 'TestingMp4.mp4' with the name of your video file. Width and height are optinal.
+
Where you replace 'TestingMp4.mp4' with the name of your video file. Width and height are optinal.
  
It will automatically mute, autoplay, and loop the video, just as if it were a GIF.
+
It will automatically mute, autoplay, and loop the video, just as if it were a GIF.
 
</noinclude>
 
</noinclude>
  
 
<includeonly>
 
<includeonly>
  
<!--{if isset($thumbnail)}-->
+
<!--{if isset($thumbnail)}-->
<!--{if isset($left)}-->
+
<!--{if isset($left)}-->
<div class="thumb tleft">
+
<div class="thumb tleft">
<!--{elseif isset($right)}-->
+
<!--{elseif isset($right)}-->
<div class="thumb tright">
+
<div class="thumb tright">
<!--{else}-->
+
<!--{else}-->
<div class="thumb tnone">
+
<div class="thumb tnone">
<!--{/if}-->
+
<!--{/if}-->
<div class="thumbinner" style="width: <!--{$width+2|escape:'html'|validate:int|default:"100%"}-->px;">
+
<div class="thumbinner" style="width: <!--{$width+2|escape:'html'|validate:int|default:"100%"}-->px;">
<a href="<!--{$file|escape:'html'}-->" >
+
<a href="<!--{$file|escape:'html'}-->" >
<!--{/if}-->
+
<!--{/if}-->
 
 
<video
 
<!--{if isset($thumbnail)}-->class="thumbimage"<!--{/if}-->
 
style="max-width: <!--{$width|escape:'html'|validate:int|default:"100%"}-->px;max-height: <!--{$height|validate:int|escape:'html'|default:"100%"}-->px;width: auto; height: auto;"
 
src="<!--{$file|escape:'html'}-->" autoplay loop muted playsinline />
 
 
 
<!--{if isset($thumbnail)}-->
 
</a>
 
<div class="thumbcaption">
 
<!--{$caption|escape:'html'}-->
 
</div>
 
</div>
 
</div>
 
<!--{/if}-->
 
  
 +
<video
 +
<!--{if isset($thumbnail)}-->class="thumbimage"<!--{/if}-->
 +
style="max-width: <!--{$width|escape:'html'|validate:int|default:"100%"}-->px;
 +
max-height: <!--{$height|validate:int|escape:'html'|default:"100%"}-->px;
 +
width: <!--{$width|escape:'html'|validate:int|default:"100%"}-->px;
 +
height: auto;"
 +
src="<!--{$file|escape:'html'}-->" autoplay loop muted playsinline />
  
 +
<!--{if isset($thumbnail)}-->
 +
</a>
 +
<!--{if isset($caption)}-->
 +
<div class="thumbcaption">
 +
<!--{$caption|escape:'html'}-->
 +
<!--{/if}-->
 +
</div>
 +
</div>
 +
</div>
 +
<!--{/if}-->
  
 
</includeonly>
 
</includeonly>

Revision as of 05:57, 21 April 2017

This allows you to embed MP4 videos as if they were a normal GIF. You use it like this;

{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|width=300|height=300}}

Where you replace 'TestingMp4.mp4' with the name of your video file. Width and height are optinal.

It will automatically mute, autoplay, and loop the video, just as if it were a GIF.