Difference between revisions of "Widget:Snippet"
| (9 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. | ||
| + | It will automatically mute, autoplay, and loop the video, just as if it were a GIF. | ||
| + | |||
You use it like this; | You use it like this; | ||
| − | <code> | + | <code><nowiki>{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|width=300|height=300}}</nowiki></code> |
| − | + | ||
| − | + | <code><nowiki>{{#widget:Snippet|file={{filepath:TestingMp4.mp4}}|thumbnail|left|caption=A beautiful thumbnail that is awesome look at it look}}</nowiki></code> | |
| − | + | ||
| − | </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 | + | Width and height are optional. If you use thumbnail, you can set which side (left or right) and give it a caption |
| − | |||
| − | |||
</noinclude> | </noinclude> | ||
| Line 24: | Line 24: | ||
<div class="thumb tnone"> | <div class="thumb tnone"> | ||
<!--{/if}--> | <!--{/if}--> | ||
| − | <div class="thumbinner" style="width: <!-- | + | <!--{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'}-->" > | <a href="<!--{$file|escape:'html'}-->" > | ||
<!--{/if}--> | <!--{/if}--> | ||
<video | <video | ||
| − | <!--{if isset($thumbnail)}-->class="thumbimage" | + | <!--{if isset($thumbnail)}-->class="thumbimage" |
style="max-width: <!--{$width|escape:'html'|validate:int|default:"300"}-->px; | style="max-width: <!--{$width|escape:'html'|validate:int|default:"300"}-->px; | ||
max-height: <!--{$height|validate:int|escape:'html'|default:"300"}-->px; | max-height: <!--{$height|validate:int|escape:'html'|default:"300"}-->px; | ||
| − | width: <!--{$width|escape:'html'|validate:int|default:" | + | width: <!--{$width|escape:'html'|validate:int|default:"300"}-->px; |
height: auto;" | height: auto;" | ||
| − | src="<!--{$file|escape:'html'}-->" autoplay loop muted playsinline /> | + | <!--{/if}--> |
| + | src="<!--{$file|escape:'html'}-->" autoplay loop muted playsinline webkit-playsinline /> | ||
<!--{if isset($thumbnail)}--> | <!--{if isset($thumbnail)}--> | ||
| Line 41: | Line 46: | ||
<div class="thumbcaption"> | <div class="thumbcaption"> | ||
<!--{$caption|escape:'html'}--> | <!--{$caption|escape:'html'}--> | ||
| + | </div> | ||
<!--{/if}--> | <!--{/if}--> | ||
| − | |||
</div> | </div> | ||
</div> | </div> | ||
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
