Digital Inspiration Technology Blog: Embed YouTube as an Audio Player

Digital Inspiration Technology Blog



Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.



Embed YouTube as an Audio Player

http://www.labnol.org/internet/youtube-audio-player/26740/

Nov 19th 2012, 09:03



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. This story, Embed YouTube as an Audio Player, was originally published at Digital Inspiration on 19/11/2012 under Embed, YouTube, Internet.













You are receiving this email because you subscribed to this feed at http://blogtrottr.com



If you no longer wish to receive these emails, you can unsubscribe here:

http://blogtrottr.com/unsubscribe/crB/ZwM84m