Skip to content

Latest commit

 

History

History
55 lines (45 loc) · 1.69 KB

File metadata and controls

55 lines (45 loc) · 1.69 KB
title Video
description Extract embed URLs from Youtube, Vimeo, and HTML5 compatible video links and preview them right inline.
intro Extract embed URLs from Youtube, Vimeo, and HTML5 compatible video links and preview them right inline. Feel free watch the whole thing instead of working – we won't tell.
screenshot fieldtypes/screenshots/v6/video.webp
screenshot_dark fieldtypes/screenshots/v6/video-dark.webp
id ced8b901-95bd-4006-b70e-4ea04d72fcb7

Usage

Enter a video URL and it will be loaded in an embedded player directly beneath the field so you can preview it.

You may enter:

  • YouTube URLs: https://www.youtube.com/watch?v=s9F5fhJQo34
  • Vimeo URLs: https://vimeo.com/22439234
  • mp4, ogv, mov, or webm URLs: http://example.com/video.mp4

Data Structure

The Video field will save the URL of the video you've entered. If you paste embed code into the field, it will extract the proper URL for you.

video: https://www.youtube.com/watch?v=s9F5fhJQo34

Templating

You can use the is_embeddable and embed_url modifiers to display your video player.

::tabs

::tab antlers

{{ if video | is_embeddable }}
    <!-- Youtube and Vimeo -->
    <iframe src="{{ video | embed_url }}" ...></iframe>
{{ else }}
    <!-- Other HTML5 video types -->
    <video src="{{ video | embed_url }}" ...></video>
{{ /if }}

::tab blade

@if (Statamic::modify($video)->isEmbeddable()->fetch())
	<!-- Youtube and Vimeo -->
	<iframe src="{{ Statamic::modify($video)->embedUrl() }}" ...></iframe>
@else
	<!-- Other HTML5 video types -->
	<video src="{{ Statamic::modify($video)->embedUrl() }}" ...></video>
@endif

::