{"id":3578,"date":"2024-03-09T09:25:40","date_gmt":"2024-03-09T15:25:40","guid":{"rendered":"https:\/\/promincproductions.com\/blog\/?p=3578"},"modified":"2024-03-09T09:25:41","modified_gmt":"2024-03-09T15:25:41","slug":"youtube-live-stream-and-live-chat-embedded-in-website-responsive","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/youtube-live-stream-and-live-chat-embedded-in-website-responsive\/","title":{"rendered":"YouTube Live Stream and Live Chat Embedded in Website (Responsive)"},"content":{"rendered":"

This tutorial shows how to embed a YouTube live stream iframe<\/code> into an HMTL page with<\/strong> the live chat streaming as well. While the YouTube platform is nice, it can be nice to keep visitors on your domain while watching a live stream to show extra promotions, etc.<\/p>\n\n\n\n

Embedding YouTube videos (and chat for that matter) can be tricky in that it is done via the iframe<\/code> element. iframe<\/code>‘s are not the most flexible HTML element. This is partially due to the nature of what is happening – blindly<\/em> embedding the contents of one site into another. The parent site doesn’t know what the dimensions of the child site is, should it scroll or not, etc. While they can be frustrating to work with, it is possible to accomplish the desired user experience in this scenario – including be responsive, providing a favorable experience for mobile users.<\/p>\n\n\n

\n
\"YouTube<\/figure>\n<\/div>\n\n\n

How to embed YouTube Live Video and Chat into a Website<\/h2>\n\n\n\n

Embedding a YouTube Live video and it’s accompanying Live Chat is done by implementing two iframe<\/code>‘s in the website – one for the YouTube Live Video and the other for the accompanying Live Chat stream. By using two iframe<\/code>‘s it allows for greater control over the layout and user experience. Also, it’s the way that YouTube designed to work – even how they do it on their own site – yes YouTube uses an iframe<\/code> to add the chat to their own site.<\/p>\n\n\n\n

With the two iframe<\/code> elements on the page, some CSS does the styling magic. In the case of this tutorial, it will be a 70\/30 split. The video will be 70% of the width of the screen and the live chat will be the remaining 30%. The CSS is responsive and so on a narrower screen (860px and less) the live chat goes below the live video iframe<\/code>.<\/p>\n\n\n\n

One critical note here is that this CSS was written to work for videos having a 16×9 aspect ratio. It is possible to adjust the CSS for other aspect ratios as needed. There are 2 aspect-ratio<\/code> directives that would need to be adjusted. The rest of the CSS is based on percentages and thus should work without any adjustment.<\/p>\n\n\n\n

Implementing Embedded YouTube Live Video and Chat into a Website<\/h2>\n\n\n\n

Below is a HTML and CSS example on how to embed YouTube Live video and chat in a website.<\/p>\n\n\n\n

This example screenshot can be found here: Example of YouTube Live video and chat embed iframes<\/a> (NOTE: the YouTube video embedded likely will change, but the HTML and CSS are still valid even if the video and chat don’t load)<\/p>\n\n\n

\n
\"YouTube<\/figure>\n<\/div>\n\n\n

YouTube Embed HTML<\/h3>\n\n\n\n

This HTML has the YouTube iframe<\/code> elements wrapped in the container HTML structure that allows for styling of the elements.<\/p>\n\n\n\n

There are two parts to this that need to be modified specific to the video being embedded.<\/p>\n\n\n\n

YouTube ID<\/h4>\n\n\n\n

Replace the two entries of <youtube_id><\/code> with the YouTube ID of the video to be embedded. This is most easily obtained from the URL of the live stream YouTube page from the v<\/code> query parameter. This needs to be set on both iframe<\/code>‘s.<\/p>\n\n\n\n

embed_domain Query Parameter<\/h4>\n\n\n\n

To get the Live Chat to stream correctly the embed_domain<\/code> query parameter for the live chat must be set to the domain (TLD) that the iframe<\/code> is being added to. So replace www.example.com<\/code> with www.yourdomain.com<\/code> accordingly when embedding this into the site. If this is not set correctly, the Live Chat will not work correctly.<\/p>\n\n\n\n

<div class=\"ytContainer ytContainerVideo\">\n    <!-- YouTube Live Video -->\n    <iframe src=\"https:\/\/www.youtube.com\/embed\/<youtube_id>\" title=\"YouTube Live video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div>\n\n<div class=\"ytContainer ytContainerChat\">\n    <!-- YouTube Live Chat -->\n    <iframe src=\"https:\/\/www.youtube.com\/live_chat?v=<youtube_id>&embed_domain=www.example.com\"><\/iframe>\n<\/div><\/code><\/pre>\n\n\n\n
YouTube Embed CSS<\/h3>\n\n\n\n
This CSS is pretty straightforward and will work for videos in the 16 x 9 aspect ratio as is.<\/p>\n\n\n\n
.ytContainer {\n    display:inline-block;\n    position: relative;\n}\n.ytContainer > iframe {\n    border: 0;\n    width: 100%;\n    height: 100%;\n}\n@media only screen and (min-width: 860px) {\n    .ytContainer.ytContainerChat > iframe,\n    .ytContainer.ytContainerChat {\n        aspect-ratio: 9 \/ 12.05;\n    }\n    .ytContainer.ytContainerVideo > iframe,\n    .ytContainer.ytContainerVideo {\n        aspect-ratio: 16 \/ 9;\n    }\n}\n.ytContainerVideo {\n    width: 69%;\n}\n.ytContainerChat {\n    width: 29%;\n}\n@media only screen and (max-width: 860px) {\n    .ytContainer {\n        display: block;\n        width: 100%;\n        padding-top: 56.25%;\n    }\n    .ytContainer > iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n}<\/code><\/pre>\n\n\n\n
Notes<\/h2>\n\n\n\n
The YouTube live chat documentation referenced below states that it will not work on mobile devices.  In testing however it works as expected using Safari and Chrome on an iPhone.<\/p>\n\n\n\n
References<\/h2>\n\n\n\n