Difference between revisions of "Widget:Snippet"

From HaloRuns Wiki
Jump to: navigation, search
 
(19 intermediate revisions by the same user not shown)
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;
+
It will automatically mute, autoplay, and loop the video, just as if it were a GIF.
 +
 +
You use it like this;
  
<code>
+
<code><nowiki>{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|width=300|height=300}}</nowiki></code>
<nowiki>
+
{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|width=300|height=300}}
+
<code><nowiki>{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|thumbnail|left|caption=A beautiful thumbnail that is awesome look at it look}}</nowiki></code>
</nowiki>
+
</code>
+
Where you replace 'TestingMp4.mp4' with the name of your video file.  
 
+
Where you replace 'TestingMp4.mp4' with the name of your video file. Width and height are optinal.
+
Width and height are optional. If you use thumbnail, you can set which side (left or right) and give it a caption
 
 
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">
+
<!--{if isset($width)}-->
<!--{/if}-->
+
<div class="thumbinner" style="width: <!--{$width+2|escape:'html'|validate:int|default:"302"}-->px;">
 
+
<!--{else}-->
<video class="thumbimage" style="max-width: <!--{$width|escape:'html'|default:"100%"}-->px;max-height: <!--{$height|escape:'html'|default:"100%"}-->px;width: auto; height: auto;" src="<!--{$file|escape:'html'}-->" autoplay loop muted playsinline />
+
<div class="thumbinner" style="width: 302px;">
 
+
<!--{/if}-->
<!--{if isset($thumbnail)}-->
+
<a href="<!--{$file|escape:'html'}-->" >
<div class="thumbcaption">
+
<!--{/if}-->
<!--{$caption|escape:'html'}-->
 
</div>
 
</div>
 
</div>
 
<!--{/if}-->
 
  
 +
<video
 +
<!--{if isset($thumbnail)}-->class="thumbimage"
 +
style="max-width: <!--{$width|escape:'html'|validate:int|default:"300"}-->px;
 +
max-height: <!--{$height|validate:int|escape:'html'|default:"300"}-->px;
 +
width: <!--{$width|escape:'html'|validate:int|default:"300"}-->px;
 +
height: auto;"
 +
<!--{/if}-->
 +
src="<!--{$file|escape:'html'}-->" autoplay loop muted playsinline webkit-playsinline />
  
 +
<!--{if isset($thumbnail)}-->
 +
</a>
 +
<!--{if isset($caption)}-->
 +
<div class="thumbcaption">
 +
<!--{$caption|escape:'html'}-->
 +
</div>
 +
<!--{/if}-->
 +
</div>
 +
</div>
 +
<!--{/if}-->
  
 
</includeonly>
 
</includeonly>

Latest revision as of 07:34, 22 April 2017

This allows you to embed MP4 videos as if they were a normal GIF. It will automatically mute, autoplay, and loop the video, just as if it were a GIF.

You use it like this;

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

{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|thumbnail|left|caption=A beautiful thumbnail that is awesome look at it look}}

Where you replace 'TestingMp4.mp4' with the name of your video file.

Width and height are optional. If you use thumbnail, you can set which side (left or right) and give it a caption