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, you won’t see anything except a blank page. Here is what you need to do;
- Add the embed code under Embed tab. (If you don’t have such option, you should Add “WP Edit” WordPress Plugin, and Add Embed Tool)
- Now Copy first highlighted text (in screenshot above) without quote https://www.youtube.com/iframe_api, and select General tab. Paste it under Source. Go back to Embed tab, and copy second highlighted text (see screenshot above) without quote https://cdn.rawgit.com/labnol/files/master/yt.js, and select General tab. Paste this under alternative source.
- Click on OK option, and 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.
<iframe width="300" height="300" src="https://www.youtube.com/watch?v=hSWlM4Z2I2I">
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.