PROS of this player
- it can play, S3, Youtube, Vimeo videos
- can be triggered on a lightbox, without using layers (good for multi-video galleries for backend)
- very small script which runs via high-speed fastly CDN (just like Convertri!)
PROS of this player
- it can play, S3, Youtube, Vimeo videos
- can be triggered on a lightbox, without using layers (good for multi-video galleries for backend)
- very small script which runs via high-speed fastly CDN (just like Convertri!)
Option 2: This one is playing CDN hosted mp4 file, and opens it in a lightbox!
Option 2: This one is playing CDN hosted mp4 file, and opens it in a lightbox!
Option 1: This one is playing YOUTUBE video, and it has custom poster or image that you can use.
Option 1: This one is playing YOUTUBE video, and it has custom poster or image that you can use.
CONS of this player
- cannot block right-click on youtube videos
CONS of this player
- cannot block right-click on youtube videos
How to create these players?
How to create these players?
For Option 1 with Youtube Video:
Copy paste this script in a HTML element:
<video class="afterglow" data-autoresize="fit" width="100%" height="100%" data-skin="light" data-youtube-id="YOUTUBE-VIDEO-ID" poster="https://LINK-TO-YOUR-POSTER-IMAGE" > </video>
<script type="text/javascript" src="https://cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
Just replace highlighted section above with your poster image link and youtube ID, i.e.
https://www.youtube.com/watch?v=5WfpCglUsVI
For Option 1 with Youtube Video:
Copy paste this script in a HTML element:
<video class="afterglow" data-autoresize="fit" width="100%" height="100%" data-skin="light" data-youtube-id="YOUTUBE-VIDEO-ID" poster="https://LINK-TO-YOUR-POSTER-IMAGE" > </video>
<script type="text/javascript" src="https://cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
Just replace highlighted section above with your poster image link and youtube ID, i.e.
https://www.youtube.com/watch?v=5WfpCglUsVI
For Option 2 with CDN/S3 Video & lightbox:
Copy paste this script in a HTML element:
<a class="afterglow" href="#ID-TO-CALL-LIGHTBOX" >
<img src="https://LINK-TO-YOUR-POSTER-IMAGE" width="100%" ></a>
<video id="ID-TO-CALL-LIGHTBOX" width="100%" height="100%" data-autoresize="fit" data-skin="light" poster="https://LINK-TO-YOUR-SECOND-POSTER-IMAGE" ><source type="video/mp4" src="https://ENTER-COMPLETE-LINK-TO-MP4-FILE" /></video>
<script type="text/javascript" src="https://cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
Just replace highlighted section above with your poster images, ID to call your lightbox, and MP4 file, i.e.
https://cdn.convertri.com/traffic-time-lapse.mp4
For Option 2 with CDN/S3 Video & lightbox:
Copy paste this script in a HTML element:
<a class="afterglow" href="#ID-TO-CALL-LIGHTBOX" >
<img src="https://LINK-TO-YOUR-POSTER-IMAGE" width="100%" ></a>
<video id="ID-TO-CALL-LIGHTBOX" width="100%" height="100%" data-autoresize="fit" data-skin="light" poster="https://LINK-TO-YOUR-SECOND-POSTER-IMAGE" ><source type="video/mp4" src="https://ENTER-COMPLETE-LINK-TO-MP4-FILE" /></video>
<script type="text/javascript" src="https://cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
Just replace highlighted section above with your poster images, ID to call your lightbox, and MP4 file, i.e.
https://cdn.convertri.com/traffic-time-lapse.mp4
BONUS Option 2: With Youtube Video & lightbox (I am using Youtube in above lightbox example):
Copy paste this script in a HTML element:
<a class="afterglow" href="#ID-TO-CALL-LIGHTBOX" >
<img src="https://LINK-TO-YOUR-POSTER-IMAGE" height="100%" width="100%" ></a>
<video id="ID-TO-CALL-LIGHTBOX" width="1280" height="720" data-autoresize="fit" data-skin="light" data-youtube-id="5WfpCglUsVI" poster="https://LINK-TO-YOUR-SECOND-POSTER-IMAGE" ></video>
<script type="text/javascript" src="https://cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
BONUS Option 2: With Youtube Video & lightbox (I am using Youtube in above lightbox example):
Copy paste this script in a HTML element:
<a class="afterglow" href="#ID-TO-CALL-LIGHTBOX" >
<img src="https://LINK-TO-YOUR-POSTER-IMAGE" height="100%" width="100%" ></a>
<video id="ID-TO-CALL-LIGHTBOX" width="1280" height="720" data-autoresize="fit" data-skin="light" data-youtube-id="5WfpCglUsVI" poster="https://LINK-TO-YOUR-SECOND-POSTER-IMAGE" ></video>
<script type="text/javascript" src="https://cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
