YouTube is quite easily the largest and most content-rich website in the world, with over a billion hours of content consumed by users every single day. YouTube Live is YouTube’s attempt to take over the global live streaming market and steer some users away from Twitch. Over the last few years, YouTube Live has managed to draw some of the big streamers from Twitch – notable streamers like Dr Disrespect who now live stream exclusively on YouTube.
If you run your own website, you may want to feature some of the content on YouTube on your own site. Thankfully YouTube makes it very easy to embed YouTube live streams. You may want to embed your own YouTube live stream, embed someone else’s live stream or even embed multiple YouTube live streams – in this article I’m going to show you how to do all of this.
How to embed YouTube Live Streams on your website (the easy way)
Thankfully, YouTube provides a natural way to embed content that we can make use of. YouTube allows you to embed any video or live stream on the site with just a few clicks. You can even embed YouTube content that doesn’t belong to you. All you have to do is navigate to the YouTube video or live stream, find the share icon along the bottom, click this and then click Share via, and then Embed.
When you click Embed, you will be presented with the YouTube Live stream embed code. This code is an <iframe> and can be copied in it’s entirety – ready to be pasted into your website. Depending on the platform your website uses, you may be able to simply paste the iframe code onto your page. Below I’m going to go into some detail about how you can embed the YouTube live stream code into any WordPress website or page.
How to embed YouTube Live Streams on WordPress
WordPress, the leading open-source CMS is a powerful way to manage your own website. If you’re already using WordPress, the good news is that it’s really easy to embed YouTube content in WordPress through the simple use of the iframe embed code. Now this might depend on the version of WordPress you’re using, your theme, or even the plugins you have installed – you should be able to embed YouTube videos and live streams using one of the two methods below.
How To Embed YouTube Live Stream In Gutenberg
Gutenberg is the new block editor in WordPress, introduced in 2018 in version 5.0. Love it or hate it, it’s very easy to embed YouTube live streams in Gutenberg. Simply load up your page, and within the block editor, add a new Custom HTML block. This presents you with a simple box that you can paste your YouTube embed code right inside like this.
How To Embed YouTube Live Stream in WordPress classic editor
The classic editor in WordPress is still favored by many, as seen by the official classic editor plugin with over 5 million downloads. If you’re one of those 5 million users, you’ll be glad to know that embedding YouTube streams inside the classic editor is just as easy. Within your page, simply switch from visual mode to text mode and paste your code.
Add custom CSS for YouTube video embed aspect ratio
By default, YouTube will try to figure out what size to make your embedded YouTube content to fit on your page. Generally this depends on the size of space available (in the space where you are trying to embed) to the embed. Now it’s possible your WordPress theme (or even some plugins) may be interfering with your YouTube embed size or aspect ratio. For this reason I have provided some CSS code below which you can use to style your YouTube embed iframes in the way you would like.
First thing is to use a selector that matches all YouTube iframes, which you can do like this iframe[src*="https://www.youtube.com/embed/"]. Next, we will default each of these iframes to position: relative, default the height and width, and then use a new CSS attribute called aspect-ratio to set the aspect ratio to 16 / 9 (the default aspect ratio used by YouTube). We also set a max-width to 540px which you can make bigger if you like.
<style>
iframe[src*="https://www.youtube.com/embed/"] {
position: relative !important;
width: 100% !important;
height: auto !important;
max-width: 540px!important;
aspect-ratio: 9 / 16 !important;
}
</style>
Feel free to copy the above code into your WordPress website if you would like to tweak the default styles, size and aspect ratio of your embedded YouTube videos and live streams.
How to embed YouTube Live Streams with StreamWeasels YouTube Integration (the awesome way)
Embedding a single YouTube live stream is easy enough with the above methods – but if you want to embed anything more than just a single Youtube channel then StreamWeasels YouTube Integration plugin is the way to go. We have a collection of Youtube WordPress plugins that allow you to embed all sorts of YouTube content. You can use StreamWeasels YouTube Integration to display all the videos from a single channel, or all videos from a single playlist. You can even use it to display embedded YouTube shorts.
When it comes to YouTube live streams, you can display the live status of a single channel, or the live status of multiple channels all together. Choose to feature the channels that are currently live, and even hide the channels which are offline.
How to display channels YouTube Live status with YouTube Integration plugin
If you run your own website and you have YouTube channels that you want to feature – maybe your friends, team members, or clan mates – you can use StreamWeasels YouTube Integration to feature your friends YouTube live streams to ensure they are always gaining visibility on your website when they are live.
In the example below I have featured a few YouTube channels that are regularly live and you can see below which channels are live and which channels are offline – and simply click them to join the stream.
How to display YouTube channel Player with YouTube Integration plugin
StreamWeasels YouTube integration comes with a variety of layouts, one of which is the YouTube player which is great to allow your users to focus on the embedded YouTube experience while still being able to view a list of YouTube content down the side.
In the example below I have featured a YouTube channel (this also works great with YouTube playlists!) using the Player layout, set to auto-load the video.
How to display YouTube channel Feature with YouTube Integration plugin
Another popular layout from StreamWeasels YouTube Integration is the Feature layout, which allows you to display YouTube content in a manner that draws a lot of attention and interactivity. This layout is actually inspirted by the Twitch homepage and is also available in our Twitch Integration plugin, but it works great for YouTube content too.
In the example below I have featured a YouTube playlist using the Feature layout.
Common errors when embedding YouTube content
While it is very easy to embed YouTube live stream content on your website, there is a common error that many users come across when trying to embed content.
YouTube Video Unavailable error
The YouTube video unavailable error will often be displayed for one reason – the video or live stream you are trying to embed is either unlisted, private, or has embed options turned off.
If you are seeing this error on your own YouTube live stream embed, you may want to check that you have embed content enabled. To do this, navigate to your video or live stream settings page, and look for the ‘Allow embedding’ option. Make sure this box is checked and you should no longer see the YouTube video unavailable error when trying to embed your YouTube live stream content.
In Conclusion
It’s clear that YouTube is doing a great job when it comes to providing quality content for it’s users, and for providing a solid embed experience to allow users to feature YouTube videos and live streams in their own websites, but there are some gaps which I hope you can see from the examples above that StreamWeasels has tried to fill.
If you’re looking for a hassle-free experience when it comes to embedding YouTube content, StreamWeasels has it all. Display your YouTube content in a variety of different layouts and give your users an amazing YouTube experience on your very own site. Feel free to take a look around our website and consider purchasing StreamWeasels YouTube Integration, and if you have any questions please don’t hesitate to reach out.