{"_id":"59bba3e215d1e10024261664","category":{"_id":"59bba3e115d1e10024261655","version":"59bba3e115d1e10024261652","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T12:02:28.639Z","from_sync":false,"order":3,"slug":"examples","title":"Examples"},"user":"55e6dc8a2d0d3021000daf6e","project":"55e6dcb32d0d3021000daf70","parentDoc":null,"version":{"_id":"59bba3e115d1e10024261652","project":"55e6dcb32d0d3021000daf70","__v":1,"createdAt":"2017-09-15T09:56:49.752Z","releaseDate":"2017-09-15T09:56:49.752Z","categories":["59bba3e115d1e10024261653","59bba3e115d1e10024261654","59bba3e115d1e10024261655","59bba3e115d1e10024261656","59bba3e115d1e10024261657"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-07T10:13:11.673Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"If you want to launch your video in a modal popup (or 'lightbox'), you should follow the [lightbox guide](doc:lightbox-player). 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    <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]\nUsing this basic lightbox setup, the player would look like this:\n[block:html]\n{\n  \"html\": \"<a href=\\\"#myvideo\\\" class=\\\"afterglow btn btn-default\\\">Launch lightbox</a>\\n<video id=\\\"myvideo\\\" width=\\\"960\\\" height=\\\"540\\\" >\\n  <source src=\\\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\\\" type=\\\"video/mp4\\\" />\\n</video>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Non-overscaling lightbox\"\n}\n[/block]\nYou might want the lightbox to scale only to the actual size of your video. This is easy, use the [*data-overscale*](doc:lightbox-setup) attribute.\n\nThe markup stays the same as in the example above, we just add this parameter. So the ´<video>` element should look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<video id=\\\"myvideo\\\" width=\\\"960\\\" height=\\\"540\\\" data-overscale=\\\"false\\\">\\n  <source type=\\\"video/mp4\\\" src=\\\"/path/to/myvideo.mp4\\\" />\\n</video>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThe lightbox will now scale to fit into the screen, but it's maximum size will be 960x540px. Try to scale this lightbox (you'll only be able to see it working if your screen is wider than ~1000px).\n[block:html]\n{\n  \"html\": \"<a href=\\\"#myvideo2\\\" class=\\\"afterglow btn btn-default\\\">Launch non-overscaling lightbox</a>\\n<video id=\\\"myvideo2\\\" width=\\\"960\\\" height=\\\"540\\\" data-overscale=\\\"false\\\">\\n  <source src=\\\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\\\" type=\\\"video/mp4\\\" />\\n</video>\"\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]","excerpt":"This page shows you how to make your video player launch in a lightbox.","slug":"launching-in-a-lightbox","type":"basic","title":"Launching in a lightbox"}

Launching in a lightbox

This page shows you how to make your video player launch in a lightbox.

If you want to launch your video in a modal popup (or 'lightbox'), you should follow the [lightbox guide](doc:lightbox-player). 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 <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] Using this basic lightbox setup, the player would look like this: [block:html] { "html": "<a href=\"#myvideo\" class=\"afterglow btn btn-default\">Launch lightbox</a>\n<video id=\"myvideo\" width=\"960\" height=\"540\" >\n <source src=\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\" type=\"video/mp4\" />\n</video>" } [/block] [block:api-header] { "type": "basic", "title": "Non-overscaling lightbox" } [/block] You might want the lightbox to scale only to the actual size of your video. This is easy, use the [*data-overscale*](doc:lightbox-setup) attribute. The markup stays the same as in the example above, we just add this parameter. So the ´<video>` element should look like this: [block:code] { "codes": [ { "code": "<video id=\"myvideo\" width=\"960\" height=\"540\" data-overscale=\"false\">\n <source type=\"video/mp4\" src=\"/path/to/myvideo.mp4\" />\n</video>", "language": "html" } ] } [/block] The lightbox will now scale to fit into the screen, but it's maximum size will be 960x540px. Try to scale this lightbox (you'll only be able to see it working if your screen is wider than ~1000px). [block:html] { "html": "<a href=\"#myvideo2\" class=\"afterglow btn btn-default\">Launch non-overscaling lightbox</a>\n<video id=\"myvideo2\" width=\"960\" height=\"540\" data-overscale=\"false\">\n <source src=\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\" type=\"video/mp4\" />\n</video>" } [/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]