Loading...

Author Topic: How to Embed YouTube as an Audio Player  (Read 1032 times)

0 Members and 1 Guest are viewing this topic.

Offline newspostng

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 593
    • View Profile
How to Embed YouTube as an Audio Player
« on: December 23, 2016, 09:50:12 AM »

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.


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 yourv data-video="VIDEO_ID" 
         data-autoplay="0"         
         data-loop="1"             
         id="youtube-audio">
  </div>
  <script src="https://www.youtube.com/iframe_api"></script>[/greenalert]


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.

YouTube Audio The 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.




 

how to download youtube videos in small size compressed format

Started by mastercode

Replies: 0
Views: 799
Last post May 23, 2016, 04:03:51 PM
by mastercode
How to Transcribe YouTube Video Files to Text

Started by yungcrux

Replies: 0
Views: 569
Last post January 16, 2017, 01:14:05 AM
by yungcrux
How to Make a YouTube Video For Beginners

Started by legendguru

Replies: 0
Views: 613
Last post June 09, 2017, 01:17:49 AM
by legendguru
How to know how much money you can make on Youtube

Started by internet police

Replies: 0
Views: 458
Last post February 18, 2017, 01:48:58 PM
by internet police