How to Embed YouTube as an Audio Player in Site


How do you embed the audio portion of any YouTube video into your website? An easy option would be that you convert the YouTube video into an MP3 file and upload it to an audio hosting site like Soundcloud. This will work but YouTube is very likely to have a problem with your approach due to copyright issues.
There’s a simpler approach as well that uses the official YouTube API and requires no file conversion.
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.
Check out this live demo. Demo Page by - www.labnol.org It may resemble an embedded audio player but there’s actually this YouTube video that’s playing in the background.

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.


  1. <div data-video="VIDEO_ID"
  2. data-autoplay="0"
  3. data-loop="1"
  4. id="youtube-audio">
  5. </div>
  6. <script src="https://www.youtube.com/iframe_api"></script>
  7. <script src="http://ift.tt/2dpKwpH"></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.
Previous
Next Post »