Difference between revisions of "Widget:Snippet"
| (25 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> | + | |
| − | </ | + | 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 | ||
| + | </noinclude> | ||
| − | + | <includeonly> | |
| − | + | <!--{if isset($thumbnail)}--> | |
| − | </ | + | <!--{if isset($left)}--> |
| + | <div class="thumb tleft"> | ||
| + | <!--{elseif isset($right)}--> | ||
| + | <div class="thumb tright"> | ||
| + | <!--{else}--> | ||
| + | <div class="thumb tnone"> | ||
| + | <!--{/if}--> | ||
| + | <!--{if isset($width)}--> | ||
| + | <div class="thumbinner" style="width: <!--{$width+2|escape:'html'|validate:int|default:"302"}-->px;"> | ||
| + | <!--{else}--> | ||
| + | <div class="thumbinner" style="width: 302px;"> | ||
| + | <!--{/if}--> | ||
| + | <a href="<!--{$file|escape:'html'}-->" > | ||
| + | <!--{/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
