{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Playing a Vimeo video","type":"basic","slug":"playing-a-vimeo-video","excerpt":"This page shows you how to play a youtube video using afterglow.","body":"If you want to play a video which is hosted on Vimeo, you should use the [`data-vimeo-id` parameter](doc:vimeo-video). This example shows you how the result would look like.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n  <head>\\n    <title>afterglow player</title>\\n    <script src=\\\"//cdn.jsdelivr.net/npm/afterglowplayer:::at:::1.x\\\"></script>\\n  </head>\\n  <body>\\n    <video class=\\\"afterglow\\\" id=\\\"myvideo\\\" width=\\\"960\\\" height=\\\"540\\\" data-vimeo-id=\\\"233970493\\\"></video>\\n  </body>\\n<html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nUsing this basic lightbox setup, the player would look like this:\n[block:html]\n{\n  \"html\": \"<video class=\\\"afterglow\\\" id=\\\"myvideo\\\" width=\\\"960\\\" height=\\\"540\\\" data-vimeo-id=\\\"233970493\\\"></video>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Please be aware, that regular Vimeo videos cannot use any other player ui than the one provided by Vimeo. This is a premium feature, which you have to pay for. So the afterglow ui won't tune in for Vimeo videos.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Read more about player parameters\",\n  \"body\": \"If you want to learn more about the player parameters that are available, you should take a look at the [player parameters section](doc:player-parameters).\"\n}\n[/block]","updates":[],"order":21,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"59fb30941a8c8d002837cedb","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Examples","slug":"examples","order":3,"from_sync":false,"reference":false,"_id":"59fb30931a8c8d002837cec4","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2015-09-04T12:02:28.639Z","__v":0},"project":"55e6dcb32d0d3021000daf70","user":"55e6dc8a2d0d3021000daf6e","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":"2017-09-15T10:14:39.725Z","githubsync":"","__v":0}

Playing a Vimeo video

This page shows you how to play a youtube video using afterglow.

If you want to play a video which is hosted on Vimeo, you should use the [`data-vimeo-id` parameter](doc:vimeo-video). This example shows you how the result would look like. [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n <head>\n <title>afterglow player</title>\n <script src=\"//cdn.jsdelivr.net/npm/afterglowplayer@1.x\"></script>\n </head>\n <body>\n <video class=\"afterglow\" id=\"myvideo\" width=\"960\" height=\"540\" data-vimeo-id=\"233970493\"></video>\n </body>\n<html>", "language": "html" } ] } [/block] Using this basic lightbox setup, the player would look like this: [block:html] { "html": "<video class=\"afterglow\" id=\"myvideo\" width=\"960\" height=\"540\" data-vimeo-id=\"233970493\"></video>" } [/block] [block:callout] { "type": "danger", "body": "Please be aware, that regular Vimeo videos cannot use any other player ui than the one provided by Vimeo. This is a premium feature, which you have to pay for. So the afterglow ui won't tune in for Vimeo videos." } [/block] [block:callout] { "type": "info", "title": "Read more about player parameters", "body": "If you want to learn more about the player parameters that are available, you should take a look at the [player parameters section](doc:player-parameters)." } [/block]