Difference between revisions of "Widget:Snippet"
| 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: <!--{$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.
