Embed YouTube as an Audio Player

How do you embed only the audio portion of a YouTube video in your web pages.

A popular option would be that you extract the audio portion of that YouTube video and then use the Google MP3 player to embed that MP3 fil into your website. This will work but YouTube is very likely to have a problem with your approach.

The other approach could be CSS based where you embed the regular YouTube video player and then use the magic of CSS styles to hide the video inside the embedded player. See demo:

This internally renders the YouTube player using the IFRAME player and should therefore work on both desktop (Flash) and mobile (HTML5) browsers.

Without boring you with the technical details, here’s the little HTML code that turn the YouTube video player into an audio player. Simply replace the youtubeID with the ID of your YouTube video and you are done.

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <div style="position:absolute;top:-276px;left:-5px">
    <iframe width="300" height="300" 
      src="https://www.youtube.com/embed/youtubeID?rel=0">
    </iframe>
  </div>
</div>

The YouTube logo inside then player, when clicked, will transport you to the original video hosted on the YouTube website.