{"id":9547,"date":"2021-03-21T10:02:03","date_gmt":"2021-03-21T10:02:03","guid":{"rendered":"https:\/\/www.rumbletalk.com\/blog\/?post_type=epkb_post_type_1&p=9547"},"modified":"2024-10-22T05:56:31","modified_gmt":"2024-10-22T05:56:31","slug":"how-to-integrate-rumbletalk-group-chat-with-youtube-video","status":"publish","type":"epkb_post_type_1","link":"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/","title":{"rendered":"How To Integrate RumbleTalk Group Chat with YouTube Video"},"content":{"rendered":"\n

You can now integrate RumbleTalk to YouTube video. Here’s how to do it.<\/p>\n\n\n

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

Easily watch videos from YouTube while using the RumbleTalk chat feature.
<\/p>\n\n\n\n

If you are watching a documentary or a series while chatting with your friends, integrating YouTube into Rumbletalk is the best solution to your situation.

Let\u2019s say that you have a RumbleTalk account already. Here are the steps that you need to follow.

PART A: <\/strong>Add <\/strong>RumbleTalk Group Chat Embed Code to your Website
<\/p>\n\n\n\n

    \n
  1. Go to your RumbleTalk admin panel, and then click on the Embed<\/em><\/strong> tab.<\/li>\n\n\n\n
  2. On the embed page, click Get Code<\/em><\/strong>.<\/li>\n\n\n\n
  3. Copy the given code and paste it anywhere you want to appear on your website.<\/li>\n<\/ol>\n\n\n\n

    (<\/strong>click here on How to Embed RumbleTalk Group chat to any website<\/strong><\/a>)<\/strong><\/p>\n\n\n\n

    PART B: Add YouTube embed code to your website<\/strong><\/p>\n\n\n\n

    1. Go to YouTube and look for the video you want to embed on your website.<\/p>\n\n\n

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

    2. Once you are in the video, click the share button.
    <\/p>\n\n\n

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

    3. After clicking the share button, choose Embed<\/em><\/strong> and copy the embed code.
    <\/p>\n\n\n

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

    4. Now that you have the embed code of both RumbleTalk chat and YouTube video, you just need to merge them in an HTML file and do some tweaking in the sizes so that it will look like this.<\/p>\n\n\n

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

    Here’s the sample code for HTML.<\/strong><\/p>\n\n\n\n

    <body>\n<div class=\"wrapper\">\n\t<div class=\"half\" style=\"--aspect-ratio: 16\/9;\">\n\t\t<iframe src=\"https:\/\/www.youtube.com\/embed\/M2h8UyjzuJU\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allow=\"autoplay\" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen><\/iframe>\n\t<\/div>\n\t<div class=\"half\" style=\"--aspect-ratio: 16\/9;\">\n\t\t<div id=\"rt-195734457f42f5a13da7bca571d96324\"><\/div>\n\t\t<script src=\"https:\/\/rumbletalk.com\/client\/?JGf6K~l9\"><\/script>\n\t<\/div>\n<\/div>\n<\/body><\/code><\/pre>\n\n\n\n
    Here’s the sample code for CSS.<\/strong><\/p>\n\n\n\n
    <style type=\"text\/css\">\n.wrapper { display: flex; max-width: 1600px; margin: auto; }\n.half { width: 50%; }\n\n[style*=\"--aspect-ratio\"] > :first-child {\n\twidth: 100%;\n}\n[style*=\"--aspect-ratio\"] > img {\n\theight: auto;\n}\n@supports (--custom:property) {\n\t[style*=\"--aspect-ratio\"] {\n\t\tposition: relative;\n\t}\n\t[style*=\"--aspect-ratio\"]::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-bottom: calc(100% \/ (var(--aspect-ratio)));\n\t}\n\t[style*=\"--aspect-ratio\"] > :first-child {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t}\n}\n<\/style><\/code><\/pre>\n\n\n\n
    Embedding a YouTube video together with your RumbleTalk chat is that easy. You can now watch your favorite YouTube video while chatting with your peers. If you have any questions about how to integrate RumbleTalk to YouTube video, don\u2019t hesitate to contact us<\/a>.
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    How To Integrate RumbleTalk Group Chat with YouTube Video – online group chat for website<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"epkb_post_type_1_category":[339,347],"epkb_post_type_1_tag":[],"acf":[],"yoast_head":"\nHow To Integrate RumbleTalk Group Chat with YouTube Video - Online Group Chat Room Plugin for Websites and Live events<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Integrate RumbleTalk Group Chat with YouTube Video - Online Group Chat Room Plugin for Websites and Live events\" \/>\n<meta property=\"og:description\" content=\"How To Integrate RumbleTalk Group Chat with YouTube Video - online group chat for website\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Group Chat Room Plugin for Websites and Live events\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/rumbletalk\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-22T05:56:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rumbletalk.com\/blog\/wp-content\/uploads\/2021\/03\/rumbletalkyoutube.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@rumbletalk\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/\",\"name\":\"How To Integrate RumbleTalk Group Chat with YouTube Video - Online Group Chat Room Plugin for Websites and Live events\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2021-03-21T10:02:03+00:00\",\"dateModified\":\"2024-10-22T05:56:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Integrate RumbleTalk Group Chat with YouTube Video\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\",\"url\":\"https:\/\/rumbletalk.com\/blog\/\",\"name\":\"Online Group Chat Plugin for Websites and Event\",\"description\":\"Embed a social group chat for communities and events. Grow your online audience with the next evolution of HTML chat room. Attach files, Mobile, Audio and Video calls.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rumbletalk.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/53a763b494aec8f004846c17ae8d90c3\",\"name\":\"Mary Alice\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g\",\"caption\":\"Mary Alice\"},\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/author\/mary-alice\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Integrate RumbleTalk Group Chat with YouTube Video - Online Group Chat Room Plugin for Websites and Live events","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/","og_locale":"en_US","og_type":"article","og_title":"How To Integrate RumbleTalk Group Chat with YouTube Video - Online Group Chat Room Plugin for Websites and Live events","og_description":"How To Integrate RumbleTalk Group Chat with YouTube Video - online group chat for website","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_modified_time":"2024-10-22T05:56:31+00:00","og_image":[{"url":"https:\/\/rumbletalk.com\/blog\/wp-content\/uploads\/2021\/03\/rumbletalkyoutube.png"}],"twitter_card":"summary_large_image","twitter_site":"@rumbletalk","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/","name":"How To Integrate RumbleTalk Group Chat with YouTube Video - Online Group Chat Room Plugin for Websites and Live events","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2021-03-21T10:02:03+00:00","dateModified":"2024-10-22T05:56:31+00:00","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/knowledge-base\/how-to-integrate-rumbletalk-group-chat-with-youtube-video\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Integrate RumbleTalk Group Chat with YouTube Video"}]},{"@type":"WebSite","@id":"https:\/\/rumbletalk.com\/blog\/#website","url":"https:\/\/rumbletalk.com\/blog\/","name":"Online Group Chat Plugin for Websites and Event","description":"Embed a social group chat for communities and events. Grow your online audience with the next evolution of HTML chat room. Attach files, Mobile, Audio and Video calls.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rumbletalk.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/53a763b494aec8f004846c17ae8d90c3","name":"Mary Alice","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/96b1fbff01b496d6a7d82bba8a4738f7?s=96&d=mm&r=g","caption":"Mary Alice"},"url":"https:\/\/rumbletalk.com\/blog\/index.php\/author\/mary-alice\/"}]}},"_links":{"self":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/epkb_post_type_1\/9547"}],"collection":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/epkb_post_type_1"}],"about":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/epkb_post_type_1"}],"author":[{"embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=9547"}],"version-history":[{"count":7,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/epkb_post_type_1\/9547\/revisions"}],"predecessor-version":[{"id":17286,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/epkb_post_type_1\/9547\/revisions\/17286"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=9547"}],"wp:term":[{"taxonomy":"epkb_post_type_1_category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/epkb_post_type_1_category?post=9547"},{"taxonomy":"epkb_post_type_1_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/epkb_post_type_1_tag?post=9547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}