{"_id":"59fb30931a8c8d002837cecb","category":{"_id":"59fb30931a8c8d002837cec2","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T12:01:11.730Z","from_sync":false,"order":1,"slug":"basics","title":"Basics"},"project":"55e6dcb32d0d3021000daf70","user":"55e6dc8a2d0d3021000daf6e","parentDoc":null,"version":{"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":2,"createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-04T14:08:49.149Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"Sometimes, it's just not the best solution to include a video into a webpage. The information it provides maybe very useful, but there is just no space to insert a video player. \n\nafterglow provides a cool way to playback videos in a lightbox (or modal, popup, give it another name). You can find a demo of afterglow's fully responsive lightbox feature [here](doc:launching-in-a-lightbox).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Setup\"\n}\n[/block]\nIn order to open a video in a lightbox, you'd just create it's `<video>` element [like you would for a normal player](doc:basic-player-setup). The only thing that changes, is that it does not get the class *afterglow*. Quick example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<video id=\\\"myvideo\\\" width=\\\"960\\\" height=\\\"540\\\">\\n  <source type=\\\"video/mp4\\\" src=\\\"/path/to/myvideo.mp4\\\" />\\n</video>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nYou then add a trigger element. Afterglow takes `<a>` elements with the class *afterglow* as triggers. Just insert a hyperlink `<a>` with the video id as *href* attribute. Like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a class=\\\"afterglow\\\" href=\\\"#myvideo\\\">Launch lightbox</a>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nBy assigning the class *afterglow* to the element, afterglow knows that you want the video with the id provided in the *href* attribute to play in a lightbox when the link is clicked.\n\nA complete HTML page with a working lightbox setup would look like this: \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    <a class=\\\"afterglow\\\" href=\\\"#myvideo\\\">Launch lightbox</a>\\n    <video id=\\\"myvideo\\\" width=\\\"960\\\" height=\\\"540\\\">\\n    \\t<source type=\\\"video/mp4\\\" src=\\\"/path/to/myvideo.mp4\\\" />\\n    </video>\\n  </body>\\n<html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Class goes to the link, not to the player\",\n  \"body\": \"Just remember this. If you don't want the player to be initalized but to open in a lightbox, don't give it the class *afterglow*. Instead, give the link element which should launch the lightbox this class.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Lightbox scaling\"\n}\n[/block]\nAs the lightbox is fully responsive, it may display your video larger than it's actual size. If you don't want the lightbox to overscale your video, use the [lightbox parameters](doc:lightbox-setup) to change this behaviour.\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Old IE alert!\",\n  \"body\": \"When using Internet Explorer 9, there are some drawbacks with link recognition. Make sure to properly open and close all tags that might be placed before the link element, otherwise problems might occur.\"\n}\n[/block]","excerpt":"Playing video in a lightbox is a dreadful task. If you don't use afterglow.","slug":"lightbox-player","type":"basic","title":"Playing in a lightbox"}

Playing in a lightbox

Playing video in a lightbox is a dreadful task. If you don't use afterglow.

Sometimes, it's just not the best solution to include a video into a webpage. The information it provides maybe very useful, but there is just no space to insert a video player. afterglow provides a cool way to playback videos in a lightbox (or modal, popup, give it another name). You can find a demo of afterglow's fully responsive lightbox feature [here](doc:launching-in-a-lightbox). [block:api-header] { "type": "basic", "title": "Setup" } [/block] In order to open a video in a lightbox, you'd just create it's `<video>` element [like you would for a normal player](doc:basic-player-setup). The only thing that changes, is that it does not get the class *afterglow*. Quick example: [block:code] { "codes": [ { "code": "<video id=\"myvideo\" width=\"960\" height=\"540\">\n <source type=\"video/mp4\" src=\"/path/to/myvideo.mp4\" />\n</video>", "language": "html" } ] } [/block] You then add a trigger element. Afterglow takes `<a>` elements with the class *afterglow* as triggers. Just insert a hyperlink `<a>` with the video id as *href* attribute. Like this: [block:code] { "codes": [ { "code": "<a class=\"afterglow\" href=\"#myvideo\">Launch lightbox</a>", "language": "html" } ] } [/block] By assigning the class *afterglow* to the element, afterglow knows that you want the video with the id provided in the *href* attribute to play in a lightbox when the link is clicked. A complete HTML page with a working lightbox setup would look like this: [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 <a class=\"afterglow\" href=\"#myvideo\">Launch lightbox</a>\n <video id=\"myvideo\" width=\"960\" height=\"540\">\n \t<source type=\"video/mp4\" src=\"/path/to/myvideo.mp4\" />\n </video>\n </body>\n<html>", "language": "html" } ] } [/block] [block:callout] { "type": "success", "title": "Class goes to the link, not to the player", "body": "Just remember this. If you don't want the player to be initalized but to open in a lightbox, don't give it the class *afterglow*. Instead, give the link element which should launch the lightbox this class." } [/block] [block:api-header] { "type": "basic", "title": "Lightbox scaling" } [/block] As the lightbox is fully responsive, it may display your video larger than it's actual size. If you don't want the lightbox to overscale your video, use the [lightbox parameters](doc:lightbox-setup) to change this behaviour. [block:callout] { "type": "danger", "title": "Old IE alert!", "body": "When using Internet Explorer 9, there are some drawbacks with link recognition. Make sure to properly open and close all tags that might be placed before the link element, otherwise problems might occur." } [/block]