The J1 Template support playing video on web pages by HTML5 Video, the new standard of HTML to show videos on webpages.
Modern browsers support the video tag <video> for the new HTML5 video standard. The previous proprietary de facto standard software like Flash Player, Quicktime, or Silverlight is no longer needed as the Jekyll theme J1 provides HTML5 Video support for local video content and from online sources on the Internet.
YouTube Audio
You can embed any YouTube video in your web pages and visitors on your site will be able to play and pause the video audio with a simple click. With this technique, you can also use a YouTube video as background audio that runs in a loop.
| The audio player is created using the YouTube API. Read the full Tutorial at: Embed YouTube as an Audio Player |
How to Embed YouTube Audio
It takes just one step to embed a YouTube audio. Open any YouTube video and make a note of the YouTube Video ID (a string of 11 characters).
Next copy-paste the code below anywhere on your website and replace VIDEO_ID with actual ID of your YouTube video.
<div data-video="VIDEO_ID" data-autoplay="0" data-loop="1" id="youtube-audio"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>There are few other configuration parameters that you can change depending on requirements. For instance, if you set data-autoplay to 1, the audio will begin playing immediately on page load. Likewise, set data-loop to 1 and the audio will play continuously in a never-ending loop until manually stopped.
This internally renders the YouTube video using the IFRAME player and would thus work on both desktop and mobile browsers. The JavaScript files are hosted on Github while the images are hosted on Imgur. It is recommended that you copy the assets to your own server before deploying on a heavy-traffic website.
Technical Details
We are using the YouTube JavaScript API that renders a regular YouTube player but with the width and height set to 0 pixels. When the user clicks the audio button, it toggles the existing YouTube player state and the video begins to play or pauses.
Here’s the annotated version of the source code. It can be extended to embed YouTube playlists, the default playback volume can be changed or you even embeda part of the video.
Amplitude Player
Quae illo voluptas doloremque deleniti est nam reiciendis nemo. Laboriosam excepturi consectetur sit perspiciatis recusandae et dolor suscipit vero adipisci aut minus alias nam. Sit occaecati fuga illo neque nemo aspernatur dolorem illum consectetur et illum quia omnis. Voluptatibus facilis nulla expedita optio at ipsa doloremque. Ut voluptatem et natus qui tempore omnis et nisi illum rerum neque voluptas blanditiis.