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…

How to Create a Professional Resume with Word 2013

How to Create a Professional Resume with Word 2013

May 28, 2013 at 03:10AM Microsoft Office is one of the most popular and useful suite which provides you with options to create a manage documents. It is very powerful tool with tons of features and improved with every version. Although there are many free alternatives available, not all of them have the features available in Office 2013. We have covered various tips, tricks and tutorials on Office suite on this blog.Resumes are very important aspect in our professional life as they show our backgrounds and skills. Whether you are a student looking for your first job or an experienced professional, a resume is one of the most important things to take care when you apply for a new job. Resume are also categorized based on the area where you are applying. If you are looking to create a new resume, you can easily get started with a professional resume using Word 2013.To start creating your resume, open Word 2013 and from the main screen…

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…