arc_youtube

A Textpattern plugin for easily embedding Youtube videos in pages using a customisable player.

This plugin works well with arc_vimeo and oui_dailymotion if you are looking to support Vimeo and DailyMotion too.

GDPR: with the introduction of GDPR you may want to consider enabling the privacy mode with this plugin so that cookies aren’t automatically set on page load.

Table of contents

1. Plugin requirements
2. Installation
3. Tags
4. Examples

Plugin requirements

arc_youtube’s minimum requirements:

• Textpattern 4.5+

Installation

To install go to the ‘plugins’ tab under ‘admin’ and paste the plugin code into the ‘Install plugin’ box, ‘upload’ and then ‘install’. Please note that you will need to set-up a custom field to use for associating videos with articles, unless you choose to directly embed the new tag in the article text.

Tags

arc_youtube

Embeds a Youtube video in the page using an iframe.

<txp:arc_youtube />

Video and playlist attributes

• video – Youtube url¹ or video ID for the video you want to embed
• playlist – Youtube playlist ID for the playlist you want to embed
• custom – Name of the custom field containing video IDs/urls associated with article
• start – Start position of the video as an integer
• auto – ‘1’ to autoplay the video, ‘0’ to turn off autoplay (default)
• loop – ‘1’ to play the video in a loop, ‘0’ for a single play
• playsinline – ‘1’ causes inline playback on iOS, ‘0’ fullscreen playback

¹ The url can be either for an individual video or for a playlist.

Basic attributes

• link – Set to ‘1’ to show a link to the Youtube video page below the player; the link text will be the URL or the text between opening and closing tags
• label – Label for the video
• labeltag – Independent wraptag for label
• wraptag – HTML tag to be used as the wraptag, without brackets
• class – CSS class attribute for wraptag

Customising the Youtube player

Some of the attributes with this plugin are subject to change if Youtube change their supported parameters for the player. Some will not work with the HTML5 player which the player defaults to if the browser supports it.

• width – Width of video
• height – Height of video
• ratio – Aspect ratio (defaults to 4:3)
• theme – Use either the “dark” or “light” Youtube player
• color – Use either a “red” or “white” video progress bar
• modestbranding – ‘1’ to prevent the YouTube logo from displaying in the control bar
• fs – ‘1’ to allow full screen, ‘0’ to disable full screen mode²
• cc – ‘1’ to display captions/subtitles by default, ‘0’ to use the user’s preference²
• related – ‘1’ to show related videos, ‘0’ to turn them off
• privacy – ‘1’ for enhanced privacy mode, no cookies unless the user clicks play, ‘0’ normal mode
• autohide – ‘2’ for the video progress bar to fade out while the player controls (play button, volume control, etc.) remain visible; ‘1’ for the video progress bar and the player controls will slide out of view a couple of seconds after the video starts playing; or ‘0’ to always show the progress bar and controls
• controls – ‘2’ to display the controls in the player, ‘0’ to hide them
• annotations – ‘1’ to show annotations, ‘3’ to hide them
• title – ‘0’ to hide the video’s title and other information, ‘1’ by default to show the information

² Not supported by the HTML5 player.

arc_if_youtube

The arc_is_youtube tag is a conditional tag and always used as an opening and closing pair. It will render the content between the tags if the video attribute is a valid Youtube URL.

<txp:arc_if_youtube video="[URL]"></txp:arc_if_youtube>

Parameters

Use one or the other of the following:-

• custom – Name of the custom field containing video IDs/urls associated with article
• video – A URL to check if it is a valid Youtube URL

Examples

Example 1: Use custom field to associate video with an article

<txp:arc_youtube custom="Youtube" />

Example 2: Customise the appearance of the player and associate video with custom field

<txp:arc_youtube theme="light" modestbranding="1" custom="Youtube" />

This will use the light player theme with modest branding (i.e. removes the Youtube logo from the controls). As example 1, the video is selected using an article’s custom field called ‘Youtube’.

Example 3: Small video player with fixed video

<txp:arc_youtube width="200" video="tgbNymZ7vqY" />

Here the video is defined within the tag using the video attribute which has been given the value of Youtube’s video ID, alternatively this value could have been the video’s URL.