Table of Contents:
☑ Copying the player code☑ Pasting the player code in HTML mode BlogSpot post
☑ Getting the YouTube live stream ID
☑ Pasting the YouTube live ID stream inside the player
☑ Testing the YouTube live stream playing inside the player
How to embed YouTube Live Streaming into your own player
👉 Listph.com was made in Blogger platform and the code works perfectly with Blogger or BlogSpot. For WordPress users, there are so many free plugins that you can install in your WordPress website. But you can also try this tutorial and see if this will also work for you.👉 Now, let's start. Copy the given code below:
<div id="player-wrapper" class="player"></div><script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script><script type="text/javascript" charset="utf-8" src="https://ewwink.github.io/clappr-youtube-plugin/clappr-youtube-plugin.js"></script><script type="text/javascript" charset="utf-8" src="http://towerz.me/clappr-youtube-playback/j/editor/ace.js"></script><script type="text/javascript" charset="utf-8" src="http://towerz.me/clappr-youtube-playback/j/clappr-youtube-playback.js"></script><script type="text/javascript" charset="utf-8" src="http://towerz.me/clappr-youtube-playback/j/main.js"></script><script>var playerElement = document.getElementById("player-wrapper");var player = new Clappr.Player({source: 'YOUTUBE LIVE ID',height: '380',width: '100%',plugins: { playback: [YoutubePlayback] }});player.attachTo(playerElement);</script><script type="text/javascript" async="async" src="https://www.youtube.com/iframe_api"></script>
☑ source: This is the YouTube live ID. Example: https://www.youtube.com/watch?v=2gILuBxG7Fs
☑ height: change this to change the height of your player.
👉 Save and Publish your work. Done!
See a live sample of a YouTube live stream below. Stream title is "Coffee Jazz Music - Chill Out Lounge Jazz Music Radio - 24/7 Live Stream - Slow Jazz" and the stream link is here. The live stream video ID is fEvM-OUbaKs.
You an also try the other code below that will also allow you to embed any live streams coming from YouTube and play it inside the different player.
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css" />
<div id="player2" data-plyr-provider="youtube" data-plyr-embed-id="YOUTUBE LIVE ID"></div>
<script src="https://cdn.plyr.io/3.5.6/plyr.polyfilled.js"></script>
<script>
const player = new Plyr('#player2');
</script>
Just change the Youtube Live ID with your own live stream. See a live sample of the player below. The same as the first player the YouTube live ID is fEvM-OUbaKs.
2 Comments
not working for me,,,,,,,,,,,,,,the player is ok but the stream of u tube will not start
ReplyDeletetry first the given sample above with the id = fEvM-OUbaKs. Then, if it works, the one you are trying to embed might be restricted.
DeletePlease comment according to the post topic. Any links and off-topic comments will not be published. Thanks!