{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Youtube video","type":"basic","slug":"youtube-video","excerpt":"This page explains how to use afterglow to play a video hosted on Youtube.","body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"All parameters on this page are optional\",\n  \"body\": \"For a working player, you don't need more than the four [mandatory parameters](doc:mandatory-parameters). All parameters on this page are optional, that means you don't have to use them.\"\n}\n[/block]\nPlaying Youtube videos is quite easy with afterglow. Instead of adding regular sources to your `<video>` element, just provide this player parameter:\n\n---\n\n> data-youtube-id=\"XXXXXXXX\"\n\nWhen passing this parameter to the `<video>` element, afterglow will play the Youtube video which is associated with the id you provide. To get the id of a Youtube video, watch out for its url, you will find the id there.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/VEYoKqxTZmm51lLviUpW_youtube-id.jpg\",\n        \"youtube-id.jpg\",\n        \"415\",\n        \"33\",\n        \"#c54a45\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIf omitted, the player will look out for other sources to play.\n\nYou can see an example of a Youtube player [here](doc:playing-a-youtube-video).\n\n---","updates":[],"order":14,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"59fb30941a8c8d002837ced4","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Parameters","slug":"player-parameters","order":2,"from_sync":false,"reference":false,"_id":"59fb30931a8c8d002837cec3","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2015-09-04T14:49:28.154Z","__v":0},"user":"55e6dc8a2d0d3021000daf6e","project":"55e6dcb32d0d3021000daf70","parentDoc":null,"version":{"version":"1.1","version_clean":"1.1.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","__v":2},"createdAt":"2015-09-12T11:09:06.023Z","githubsync":"","__v":0}

Documentation

Basics

Parameters

Examples

Advanced stuff

Recipes

Youtube video

This page explains how to use afterglow to play a video hosted on Youtube.
[block:callout] { "type": "info", "title": "All parameters on this page are optional", "body": "For a working player, you don't need more than the four [mandatory parameters](doc:mandatory-parameters). All parameters on this page are optional, that means you don't have to use them." } [/block] Playing Youtube videos is quite easy with afterglow. Instead of adding regular sources to your `<video>` element, just provide this player parameter: --- > data-youtube-id="XXXXXXXX" When passing this parameter to the `<video>` element, afterglow will play the Youtube video which is associated with the id you provide. To get the id of a Youtube video, watch out for its url, you will find the id there. [block:image] { "images": [ { "image": [ "https://files.readme.io/VEYoKqxTZmm51lLviUpW_youtube-id.jpg", "youtube-id.jpg", "415", "33", "#c54a45", "" ] } ] } [/block] If omitted, the player will look out for other sources to play. You can see an example of a Youtube player [here](doc:playing-a-youtube-video). ---