PROS of this player
- it can play, S3, Youtube, Vimeo videos and
- can avoid someone to right-click through to youtube/vimeo!
PROS of this player
- it can play, S3, Youtube, Vimeo videos and
- can avoid someone to right-click through to youtube/vimeo!
Video 2: This one is playing CDN hosted mp4 file.
Video 2: This one is playing CDN hosted mp4 file.
Video 1: This one is playing YOUTUBE video.
Video 1: This one is playing YOUTUBE video.
CONS of this player
- involves multiple scripts (but no considerable effect on Page Insight speed)
CONS of this player
- involves multiple scripts (but no considerable effect on Page Insight speed)
How to create these players?
How to create these players?
For Player/Video 1 with Youtube Video:
Copy paste this script in a HTML element:
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/demo.css">
<div data-type="youtube" data-video-id="ENTER-YOUTUBE-ID-HERE" autoplay></div>
<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<script src="https://cdn.plyr.io/2.0.13/demo.js"></script>
Just replace highlighted section above with your youtube ID, i.e.
https://www.youtube.com/watch?v=5WfpCglUsVI
For Player/Video 1 with Youtube Video:
Copy paste this script in a HTML element:
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/demo.css">
<div data-type="youtube" data-video-id="ENTER-YOUTUBE-ID-HERE" autoplay></div>
<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<script src="https://cdn.plyr.io/2.0.13/demo.js"></script>
Just replace highlighted section above with your youtube ID, i.e.
https://www.youtube.com/watch?v=5WfpCglUsVI
For Player/Video 2 with CDN/S3 Video:
Copy paste this script in a HTML element:
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/demo.css">
<video src="ENTER-COMPLETE-LINK-TO-MP4-FILE" width=640 height=360 poster="https://LINK-TO-YOUR-POSTER-IMAGE"></video>
<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<script src="https://cdn.plyr.io/2.0.13/demo.js"></script>
Just replace highlighted section above with your poster image and MP4 file, i.e.
https://cdn.convertri.com/traffic-time-lapse.mp4
For Player/Video 2 with CDN/S3 Video:
Copy paste this script in a HTML element:
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/demo.css">
<video src="ENTER-COMPLETE-LINK-TO-MP4-FILE" width=640 height=360 poster="https://LINK-TO-YOUR-POSTER-IMAGE"></video>
<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<script src="https://cdn.plyr.io/2.0.13/demo.js"></script>
Just replace highlighted section above with your poster image and MP4 file, i.e.
https://cdn.convertri.com/traffic-time-lapse.mp4
