This post will show you how to simply embed or put a YouTube live streaming video into your own or any other different working video player. Mainly, the reason why you wanna do this is to prevent your viewers to click your YouTube live stream and directly watch it on the YouTube website. The video player that we have here on this tutorial will allow you to make the live stream unclickable

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.

👉 In your Blogger, create a New Post and from Compose, change it to HTML.
 
👉 Paste the copied code above. Change the YouTube live ID with your own live stream ID.

👉 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.

Press the Play button to start playing the live stream. Important note: The live stream might not already working from the time it was posted for this article. It doesn't really mean that the player is also not working.

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.