In this post, you will learn how to display a YouTube Live Stream on your Bootstrap website. Do you use YouTube Live Stream? Do you have a website built using Bootstrap? If you answered YES to both questions, this tutorial is for you!

Method 1: Steps for SociableKIT

  • Go to SociableKIT.com and click Sign up. You will be automatically logged in after you sign up.
  • On the dashboard, click the "+ Create Solution" button on the upper right corner.
  • Select "YouTube Live Stream" on the dropdown.

    • Click the "Select Channel" button.

    You may also select your region and YouTube API key.

  • Click the "NEXT" button. This will show you the customization options.
  • Click the "Embed on website" button on the upper right corner. Copy the JavaScript code.

Method 2: Steps for Bootstrap

    1. Prepare your HTML structure: Ensure you have a container or a suitable location where you want to embed the widget. Let's assume you have a Bootstrap column where you want to place it.
    2. Insert the JavaScript for embedding: Place the JavaScript just before the closing tag to ensure it loads after the DOM content: <script src='https://widgets.sociablekit.com/facebook-photo-album-single/widget.js' async defer>script>
    3. Ensure Bootstrap and required dependencies are loaded: Make sure Bootstrap CSS and JS files are included in your page. Include them in the section of your HTML if they are not already included.
    4. Final HTML structure: Combine everything together in your HTML file. Here’s how it might look:
    5. Adjust CSS and other settings: Depending on your specific requirements, you may need to adjust CSS styles to ensure the embedded content fits well within your Bootstrap layout.

If you think this post about how to display YouTube Live Stream on Bootstrap is helpful, please share it with your friends! Thank you and we appreciate your kind support!