So you are now streaming on YouTube Live and it's working great but you also want to embed your live service on your site. This isn't possible with the YouTube shortcode since it want's the ID of a specific video and each live stream has it's own ID. We'll you're in luck, there's still a way to use a shortcode and embed your live video!

I've made(well... actually copied and modified the original) a shortcode that will let you do exactly this but there's a few things you'll need to activate and get from your YouTube account to let you do this. Once that's done and you're armed with information you can follow this guide to creating the YouTube Live shortcode and then get those live videos on you're site every time you stream!

First you need to go to your YouTube account Features page and enable Live streaming and Embed live streams feature. 

Annotation_2020-07-14_182405.png


After that, head over to your YouTube accounts advanced settings page. On that page make a note of your Channel ID, this is what you'll put into the shortcode we create.

Next grab the file from the link below or copy paste the code I've included. Head over to your Rock server and go to Admin Tools > CMS Configuration > Lava Shortcodes. Scroll to the bottom ant hit the + symbol. Enter the information from the file\code in the correct fields and hit save.

Annotation_2020-07-14_183315.png

Annotation_2020-07-14_183342.png

Name:
    Youtube Live Stream

Tag Name:     livestream
Tag Type:     Inline
Description:     A shortcode for embeding all future livestreams to your YouTube account.
Documentation:     This will put your future live events onto your page in a responsive container. There are options that you can configure     Basic Usage:     {[ livestream id:'8kpHK4YIwY4' ]}     Options:     id (required) – The YouTube Chanel ID. You can get it from this link. https://www.youtube.com/account_advanced     width (100%) – The width you would like the video to be. By default it will be 100% but you can provide any width in percentages, pixels, or any other valid CSS unit of measure.     showinfo (false) – This determines if the name of the video and other information should be shown at the top of the video.     controls (true) – This determines if the standard YouTube controls should be shown.     autoplay (true) – Should the video start playing once the page is loaded?
Shortcode:     {% assign wrapperId = uniqueid %}     {% assign parts = id | Split:'/' %}     {% assign id = parts | Last %}     {% assign parts = id | Split:'=' %}     {% assign id = parts | Last | Trim %}     {% assign url = 'https://www.youtube.com/embed/live_stream?channel=' | Append:id | Append:'' %}     {% assign showinfo = showinfo | AsBoolean %}     {% assign controls = controls | AsBoolean %}     {% assign autoplay = autoplay | AsBoolean %}
    {% if showinfo %}         {% assign url = url | Append:'&showinfo=1' %}     {% else %}         {% assign url = url | Append:'&showinfo=0' %}     {% endif %}     {% if controls %}         {% assign url = url | Append:'&controls=1' %}     {% else %}         {% assign url = url | Append:'&controls=0' %}     {% endif %}     {% if autoplay %}         {% assign url = url | Append:'&autoplay=1' %}     {% else %}         {% assign url = url | Append:'&autoplay=0' %}     {% endif %}
    <style>     #{{ wrapperId }} {         width: {{ width }};     }     .embed-container {         position: relative;         padding-bottom: 56.25%;         height: 0;         overflow: hidden;         max-width: 100%; }     .embed-container iframe,     .embed-container object,     .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }     </style>
    <div id='{{ wrapperId }}'>         <div class='embed-container'><iframe src='{{ url }}' frameborder='0' allowfullscreen></iframe></div>     </div> Parameters:     showinfo: false     controls: true     autoplay: false     width: 100%

Make sure you set the parameters at the end to whatever you desire. I've made the default for autoplay to true on our server.

Now that we have created our short code head over to the website page that you want to embed the live stream on and drop a HTML block on the page. Open the block options and edit the block and add the newly created shortcode with your YouTube ID that you got earlier so it looks like this and then hit save:

 Annotation_2020-07-14_191242.png


And your done! You should see a player that says you're offline.


Annotation_2020-07-14_192059.png


Since your not streaming all of the time you'll get the offline video player. But wait there's more!

Here's a couple of tips for really spicing this up.

  1. Combine this with a countdown timer.
  2. Add some lava with the original youtube shortcode to display a different video while you're not live.

I've combined another recipe (thanks Randy Aufrecht ) with this and that gives us a countdown timer to the next live service so that while we're not live you get the countdown and you also get another youtube video that isn't a live stream!

Hope this helps!