Can I Embed YouTube Videos As Audio Player on Website or Blog

Earlier I published with the guide how a blogger can embed YouTube video without logo on any website, and today we will tell you how YouTube videos can be embedded as Audio player.

There are many ways to convert YouTube Videos to Mp3 or other audio files, and those files can be uploaded on audio hosting websites, e.g. SoundCloud, and then you can embed the audio file on your blog. However, this is a long procedure that could be frustrating, and you may also breach the copyright in this procedure. So we will learn how we can embed Youtube Videos as Audio Player on our blogs or websites without downloading them.

Here is how it will look like when you embed YouTube as Audio file. Click on the play icon, and it will start playing.

How to embed YouTube Video as Audio Player on WordPress, Joomla and any other blog or website

Copy and paste the following embed code on your blog, and replace Video_ID with YouTube_Video_ID. Make sure you use Video ID (not playlist ID). YouTube video ID consists 11 characters including special characters (e.g. kvz_gW5C2cY).

<div data-video="Video_ID" data-autoplay="0" data-loop="1" id="youtube-audio"></div> <script src="https://www.youtube.com/iframe_api"></script> <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

• If you want the audio to start playing automatically on page load, replace data-autoplay from “0” to “1”.
• Note : This audio embed feature will not work on AMP Pages, because it includes Java Script.

Embed Issue and Fix for WordPress

I don’t see anything after adding the embed code in a post on WordPress blog?

Yes, when you use the embed code given above using the Embed Tool on WordPress Blog, you won’t see anything. Here is what you need to do;

• If you are using Visual Editor while writing a post, switch to Text option. Then Paste the Embed Code where you want the audio Player within post.

• Now you can switch to Visual option and start writing post normally. You will see 2 small icons in post, like below screenshot. However, don’t worry it will show only one big Play button after you publish the post.

The code for this purpose has been created by Digital Inspiration.

Alternative Option With Player/Controls

There is one problem with the above mentioned embedding method. Users doesn’t get any option to forward sound. You can allow users to control sound with player option by shrinking player size. In this case, YouTube Player will be shown, but video will be hidden.

Use the following embed code. Replace YouTube URL with the URL of the YouTube Video you want to add.

<div style="position:relative;width:267px;height:40px;overflow:hidden;">
<div style="position:absolute;top:-258px;left:-5px">
<iframe width="300" height="300" src="https://www.youtube.com/watch?v=hSWlM4Z2I2I">
</iframe></div></div>

Here is how output will look like;

Users must click on Black bar to see player options. Please note that it may appear as large player on AMP pages.

If you want to show the Black bar only with Play/Pause and Sound options, replace -258px with -266px.

Please commend below if you face any issue following these methods.