Skip to main content

How to 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.


Tweet this Share on Facebook




Digital Inspiration @labnol This story, How to Embed YouTube as an Audio Player, was originally published at Digital Inspiration on 19/11/2012 under Embed, YouTube, Internet.






via Digital Inspiration Technology Blog http://www.labnol.org/internet/youtube-audio-player/26740/

Popular posts from this blog

How to Recover Product Key of Windows 8 and Microsoft Office 2013

How to Recover Product Key of Windows 8 and Microsoft Office 2013

April 30, 2013 at 09:24PM Today most of software and applications come with product keys and to remember the lengthy keys is difficult. There are lots of chances that you don’t remember the keys and forget the file name where you stored your product key. Product keys are basic to activate Windows operating system and Microsoft Office Suit. If you have purchased DVD of the product then you need not make effort to remember the product keys because product keys are written down on the DVD label surface or inside the DVD. The difficulty arises when you have purchased the software (any software) online then the issue of remembering crops up.Now you are lost; what to do? From where should one get the product key? Do not worry a bit, I have a solution which is easy and always works for you. There is a special tool known as ‘ProduKey’ which is a Windows application that displays the ProductID and the CD-Key of Microsoft Offic…

5 Awesome Search Tools for Twitter

5 Awesome Search Tools for Twitter

April 20, 2013 at 07:40PM Twitter is undoubtedly one of the most popular social networking and micro blogging tool today. Ever since its launch in 2006, it has grown rapidly. The service rapidly gained worldwide popularity, with over 500 million registered users as of 2012, generating over 340 million tweets daily and handling over 1.6 billion search queries per day. So if you have been a Twitter user for long time, you might already know searching for any tweets or mention from the timeline is not possible. For this you will need dedicated search tools.So if you want to do an advanced search on Twitter, here are some best tools to get started.Related Reading:Ways to Search Twitter1. Twitter Search:Twitter has a default search tool which is pretty good to search for old tweets. It also has an advanced search where you can select people, places, etc. to search tweets. You can also use operators for search.2. SnapBird:SnapBird is a powerful search en…

Ten Apps you Must Download when you Buy A New Android Smartphone

Ten Apps you Must Download when you Buy A New Android Smartphone

May 14, 2013 at 11:21PM You have spent loads of time researching which is the best Android smartphone that fits your budget, spoken to people in the know about gadgets and have saved accordingly. After contemplating a fair bit if this is the right time to pick a device and there is no other device you would rather have, you take a plunge into the astonishing world of Android and pick that shiny new Android device. Right now it is sitting proudly in your hands as you admire every curve, every pixel, visible or not of your new Android smartphone.It is the time to load your Android smartphone, to make it truly yours, a device that would be with you through your thick and thin. Time to install those applications which will complete your world, if not complete, at least make your world a lot more organized and a lot more fun. So which apps do you start off with?Like the famous Nokia commercial goes, you have our back. Here …