Extension:EmbedVideo

<languages />
<templatestyles src="Template:Infobox/styles.css" /><templatestyles src="Template:Extension/styles.css" /><templatestyles src="Template:Extension/status.css" />**Lua error: expandTemplate: template loop detected.**

<translate> The <tvar name=1>**EmbedVideo**</tvar> extension adds a parser function called <tvar name=2>`#ev`</tvar> for embedding video clips from over 24 popular video sharing services in multiple languages and countries.</translate>
<translate> It also adds video and audio media handlers to support transforming standard <tvar name=1>[[File:Example.mp4]]</tvar> file links into embedded HTML5 <tvar name=2>Template:Tag</tvar> and <tvar name=3>Template:Tag</tvar> tags.</translate>

<translate> Project Homepage</translate>
<translate> Documentation at GitLab</translate>
<translate> Source Code</translate>
<translate> Source code at GitLab</translate>
<translate> Bugs</translate>
<translate> Issues at GitLab</translate>
<translate> Licensing</translate>
<translate> EmbedVideo is released under [<tvar name=url>https://www.opensource.org/licenses/mit-license.php</tvar> The MIT License].</translate>
<translate> [[<tvar name=1>Special
MyLanguage/GDPR (General Data Protection Regulation) and MediaWiki software</tvar>|GDPR]]-conform Forge</translate>
<translate> Source code at GitHub</translate> - <translate> focuses on a more privacy centric version of EmbedVideo.</translate> <translate> Note that only YouTube, Spotify, Vimeo and Archive.org are supported and every parser function but <tvar name=1>`#ev`</tvar> is removed.</translate>
<templatestyles src="Note/styles.css" />

<translate> As of the 2.x series the EmbedVideo extension has a new maintainer and an entirely rewritten code base.</translate> <translate> It retains backwards compatibility with EmbedVideo 1.0 and EmbedVideoPlus.</translate>
<translate>

## Usage

### Media handler

</translate>
<translate> For locally uploaded content the process for displaying it on a page is the same as an image.</translate>
<translate> [[<tvar name=1>Special:MyLanguage/Help:Images#Syntax</tvar>|See the image syntax documentation]] for complete reference on this feature.</translate>

<translate>
This example would display a video in page using a HTML5 <tvar name=1>Template:Tag</tvar> tag.
</translate>

```
[[File:Example.mp4]]
```

<translate> To specify the start and end timestamps in the media use the start and end parameters.</translate>
<translate> The timestamp can be formatted as one of: ss, :ss, mm:ss, hh:mm:ss, or dd:hh:mm:ss.</translate>

```
[[File:Example.mp4|start=2|end=6]]
```

<translate>

### Tags

The EmbedVideo parser function expects to be called in any of the following ways:

#### <tvar name=1>`#ev`</tvar> — Classic parser tag

</translate>

* `{{#ev:service|id}}`
* `{{#ev:service|id|dimensions}}`
* `{{#ev:service|id|dimensions|alignment}}`

<translate> However, if needed optional arguments may be left blank by not putting anything between the pipes:</translate>

<translate>

#### <tvar name=1>`#evt`</tvar> — Parser tag for templates

The <tvar name=1>`#evt`</tvar> parser tag allows for key=value pairs which allows for easier templating and readability.
</translate>

```
{{#evt:
service=youtube
}}
```

<translate>

#### <tvar name=1>`#evu`</tvar> — Parser tag for URLs

The <tvar name=1>`#evu`</tvar> parser tag is like the <tvar name=2>`#evt`</tvar> tag, but its first parameter is a URL that will be parsed to determine the service automatically.
</translate>

```
{{#evu:https://www.youtube.com/watch?v=eAORm-8b1Eg
}}
```

<translate>

#### <tvar name=1>Template:Tag</tvar> — Tag hook

</translate>
<translate> Videos can easily be embedded with the <tvar name=1>Template:Tag</tvar> tag hook.</translate>
<translate> The ID/URL goes as the input between the tags and parameters can be added as the tag arguments.</translate>

```
<embedvideo service="youtube">https://www.youtube.com/watch?v=eAORm-8b1Eg</embedvideo>

```

<translate> Alternatively, you can also use the service id as the tag (assuming another extension isn't already using this tag).</translate>

```
<youtube>https://www.youtube.com/watch?v=eAORm-8b1Eg</youtube>

```

<translate>

### Attributes for parser tags

</translate>

<translate>

### Examples

</translate>

 File:EmbedVideoExample1-new.png
<translate> For example, a video from YouTube uses the <tvar name=1>`youtube`</tvar> service selector.</translate>
<translate> You can specify either the raw ID:</translate>

```
{{#ev:youtube|eAORm-8b1Eg}}
```

<translate> Or specify the full URL:</translate>

```
{{#ev:youtube|https://www.youtube.com/watch?v=eAORm-8b1Eg}}
```

<translate> To display the same video as a right aligned large thumbnail with a description:</translate>

```
```

<translate> For YouTube to have the video start at a specific time code utilize the <tvar name=1>`urlargs`</tvar> (URL arguments) parameter.</translate>
<translate> Take the rest of the URL arguments from the custom URL and place them into the <tvar name=1>`urlargs`</tvar>.</translate>
<translate> Please note that not all video services support extra URL arguments or may have different keys for their URL arguments.</translate>

```
https://www.youtube.com/watch?v=eAORm-8b1Eg&start=76
```

```
```

<translate> URL arguments can be used to chop up a video and loop it:</translate>

```
https://www.youtube.com/watch?v=eAORm-8b1Eg&start=160&end=180&loop=1
```

```
```

<translate>

## Support for VideoLink tags

Support for the unmaintained VideoLink extension's tags has been added since version 2.5.

From the original extension documentation:
</translate>

```
<translate nowrap>
<!--T:75-->
The VideoLink extension allows embedding of YouTube videos in articles; allowing for multiple linked videos to be played in a single embedded video player, first shown when a user clicks on a video link.

<!--T:76-->
The <tvar name=1><evlplayer /></tvar> specifies where the player should appear within the page, and the <tvar name=2>{{#vlink}}</tvar> parser function allows creation of links that load a specific video.
</translate>

```

<translate>

### <tvar name=1>Template:Tag</tvar> — Tag hook for video container

</translate>

<templatestyles src="Note/styles.css" />

<translate> The use of the <tvar name=1>Template:Tag</tvar> tag is also acceptable here for backwards compatibility.</translate>
<translate> This <tvar name=1>Template:Tag</tvar> tag is used to position the video player container within the page.</translate>

```
<evlplayer id="player id" w="width" h="height" class="class" style="style"><translate nowrap><!--T:80--> default content</translate></evlplayer>

```

<translate> A default video can be set to fill the container by default instead of *default content* as well.</translate>

```
<evlplayer id="player1" w="480" h="360" service="youtube" defaultid="eAORm-8b1Eg" />

```

<translate> An important caveat to make note of, is that the <tvar name=1>`w`</tvar> and <tvar name=2>`h`</tvar> attributes only effect the video that is being included into the container <tvar name=3>Template:Tag</tvar>, and not the actual container.</translate>
<translate> For styling of the container, please use the <tvar name=1>`class`</tvar> or <tvar name=2>`style`</tvar> attributes.</translate>

<translate>

### <tvar name=1>`#evl`</tvar> — Parser function for video links

</translate>

<templatestyles src="Note/styles.css" />

<translate> The use of the <tvar name=1>`{{#vlink}}`</tvar> parser function is also acceptable here for backwards compatibility.</translate>

```
```

<translate> In addition to all of the attributes supported by the <tvar name=1>`#evt`</tvar> tag, these specific attributes apply to the <tvar name=2>`#evl`</tvar> (and <tvar name=3>`#vlink`</tvar>) tags.</translate>
<translate> To maintain backwards compatibility, if you do not define a <tvar name=1>`service`</tvar> then <tvar name=2>`youtube`</tvar> is assumed.</translate>

<translate>

### Video link examples

Creating a video list allows video links to create a playlist on the fly using the <tvar name=1>*youtube*</tvar> and <tvar name=2>*youtubevideolist*</tvar> service.
</translate>

<templatestyles src="Note/styles.css" />

<translate> Even if you define a service the system will use youtube if a list of videos is provided.</translate>

```
<evlplayer w="width" h="height" class="class" style="style" id="example-player"><translate nowrap><!--T:131--> default content</translate></evlplayer>

```

```
{{#evl:21X5lGlDOfg|NASA Live|1|player=example-player}}
```

```
{{#evl:lEyCq2KRZik|IIS Q&A|2|player=example-player}}
```

```
{{#evl:OLeWbRdW6rY|Space Station Tour|3|player=example-player}}
```

<translate>

## Supported services

As of version 2.x, EmbedVideo supports embedding video content from the following services:
</translate>

<translate>

## Installation

</translate>
Template:ExtensionInstall

Template:Anchor
<translate>

## Configuration

</translate>

<translate>

## Version history

</translate>

v2.9.0
* Fix stored XSS in AudioTransformOutput and VideoTransformOutput.
* Fix autoResize on mobile.
* Fix video caption escaping the container.
* Handle multiple video sizes per page in resize.
* Move beam service to mixer.
* Add a default link title for #evl/#vlink.
* Add spotify playlist embeds.
* Add facebook video embeds.
* Fix centering of videos.
* Add Microsoft Stream service.
* Add title to iframes.
* Add API help messages for 1.33 compatibility.
* Fix static analysis issues.
* Fix Twitch embeds.

v2.8.0
* Renamed hitbox.tv to smashcast.tv.
* Updated Nico Video embed code.
* Added support for Twitch clips.
* Fix issues with Twitch VODs.
* Removed unused $wgFFmpegLocation that was interferring with TimedMediaHandler.
* Added Polish translation.

v2.7.4
* Added support for playlist to evlplayer
* Added support for youtube video list
* Updated Documentation for evlplayer
* Added missing dependency for evlplayer in extension.json

v2.7.3
* Default Twitch VOD to autoplay=false by default
* Allow videos to be sized in 1:1 aspect ratios for special use cases.

v2.7.2
* Added feature to evlplayer to allow default video content

v2.7.1
* Fixed issue with youku videos not embedding properly on https enabled wikis.

v2.7.0
* Added SoundCloud support
* Added ability to use service name as a parser tag (if not defined previously)

v2.6.1
* Added new configuration options to disable adding media handlers and file extensions.
	+ https://gitlab.com/hydrawiki/extensions/EmbedVideo/issues/76
* Fixed an uninitialized array.
	+ https://gitlab.com/hydrawiki/extensions/EmbedVideo/issues/77
* Fixed undefined indexes in the AudioHandler class.
	+ https://gitlab.com/hydrawiki/extensions/EmbedVideo/issues/78
* Fixed class properties that were unintentionally declared as static.
	+ https://gitlab.com/hydrawiki/extensions/EmbedVideo/issues/75
* Fixed RTL language issues with CSS.
	+ https://gitlab.com/hydrawiki/extensions/EmbedVideo/pull/73

## Developer notes

The major benefit of using a parser function as the injection mechanism for video clips (as opposed to an extension tag) is that parser functions can utilize template parameters (of the form `{{{1}}}`).

For example, say you found yourself making a lot of YouTube videos in thumbnail size, right-aligned like an image. You might make a template called `Template:Youtube_tn` which could contain this:

```
<div class="thumb tright">
{{#ev:youtube|{{{1}}}|{{{2|100}}}}}
</div>

```

And then call it like this:

```
{{youtube tn|someYoutubeId}}

```

### Reporting bugs

There is an issue tracker set up on the GitLab project page.

### Contributing

Bug reports, feature requests, and patches are always welcome. New contributors can be added to the GitLab project if there is sufficient interest.

## See also

* Fork of EmbedVideo — A more privacy centric version of this Extension. Note that only YouTube, Spotify, Vimeo and Archive.org is supported, but new services can be requested through GitHub. Moreover every parser function but `#ev` and the parser tags like `<embedvideo>`, `<youtube>` etc. are removed

## References

1. ↑ MediaWiki.org - Topic:W5ad54qjb5sbkg7b, 2021-04-23

[[Category:Video player extensions{{#translation:}}]]
[[Category:YouTube extensions{{#translation:}}]]