How to embed youtube livestream chat

后端未结
关注
 5  787
I\'m trying to embed a youtube livestream chat onto a webpage on my website,
</script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5408099190056760"
     data-ad-slot="7305827575"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>        </div>
                      <div class="relativetags">
              相关标签:
       </div>
      </div>
      
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>5条回答</legend>        </fieldset>

        <ul class="jieda" id="jieda">
                         				            <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-72.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000072.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-72.html" class="fly-link">
                  <cite>半阙折子戏 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-12-06 03:41</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>Simple solution for Angular : </p>

<p>HTML part : </p>

<pre><code>  &lt;iframe frameborder="0" height="470" [src]="url" width="780"&gt;&lt;/iframe&gt;
</code></pre>

<p>TS part :</p>

<pre><code>constructor(private sanitizer: DomSanitizer) {}

ngOnInit() {
  this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/live_chat?v=[YOUR_LIVESTREAM_ID]&amp;embed_domain=' + window.location.hostname);
}
</code></pre>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='876073'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="876073">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_876073">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="876073">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-118.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000118.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-118.html" class="fly-link">
                  <cite>醉酒成梦 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-12-06 03:44</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>I'm not sure if you got this working in the end? We have managed to get it working on our site using this iframe, hope it helps you:</p>

<pre><code>&lt;iframe src="https://www.youtube.com/live_chat?v=YourVidCodeHere&amp;embed_domain=www.YourDomainHere.com"width="100%" height="600"&gt;&lt;/iframe&gt;&nbsp;
</code></pre>

<p>I hope that helps:) PS it doesn't work on mobile (YouTube said they have removed this feature from mobile), but it does work on desktop and tab.</p>

<p>Best wishes.</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='876072'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="876072">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_876072">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="876072">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-114.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000114.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-114.html" class="fly-link">
                  <cite>难免孤独 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-12-06 03:49</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>This appears to have to do with the introduction of this change to iframes, at least when I had this issue.</p>

<p>To fix this, I would suggest the use of a script like the following:</p>

<pre><code>&lt;script&gt;  
 let frame = document.createElement("iframe");  
 frame.referrerPolicy = "origin";  
 frame.src = "https://www.youtube.com/live_chat?v=VIDEO_ID&amp;embed_domain=" + window.location.hostname;  
 frame.frameBorder = "0";  
 frame.id = "chat-embed";  
 let wrapper = document.getElementById("chat-embed-wrapper");  
 wrapper.appendChild(frame); 
&lt;/script&gt;
</code></pre>

<p>Where <code>chat-embed-wrapper</code> is the parent of the iframe with the id <code>chat-embed</code> and <code>VIDEO_ID</code> (in the <code>frame.src</code> assignment) is the id of your target video. You'll have to modify this a little for your setup, but this is the general case solution.</p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='876070'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="876070">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_876070">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="876070">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-35.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000035.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-35.html" class="fly-link">
                  <cite>故里飘歌 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-12-06 03:51</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>I can confirm this indeed works. However, I received the same X Frame error when <code>embed_domain</code> had the value "example.com" even though the url of the page started with "https://www.example.com". i.e. ensure the value matches <code>window.location.hostname</code>. Addison Crump's workaround could work for this if you do not have canonical host redirection working. </p>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='876071'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="876071">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_876071">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="876071">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          <li data-id="111">
            <a name="item-1111111111"></a>
           
            <div class="detail-about detail-about-reply">
                              <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-33.html">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000033.jpg" alt=" ">
              </a>
              <div class="fly-detail-user">
                <a href="https://www.e-learn.cn/qa/u-33.html" class="fly-link">
                  <cite>情书的邮戳 </cite>       
                </a>
              </div>
                            <div class="detail-hits">
                <span>2020-12-06 03:59</span>
              </div>
            </div>
            <div class="detail-body jieda-body photos">
                                                                       
<p>It seems to me that <strong>YouTube disabled the feature</strong> to embed a live chat on external websites, but then forgot to update the documentation. Or alternatively, there could be an unfixed bug that broke this feature.</p>
<h2>Details</h2>
<p>The YouTube knowledge base still says that embedding a live chat iframe into an external website is still possible, using a URL like the one you posted (see here, in section &quot;Embed Live chat&quot;).</p>
<p>However, when trying that and looking into the browser's console, you will see a message like this:</p>
<blockquote>
<p>Refused to display 'https://www.youtube.com/live_chat?v=12345&amp;embed_domain=example.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.</p>
</blockquote>
<p>You can also see that <code>x-frame-options: SAMEORIGIN</code> header in the &quot;Network&quot; tab of the browser's developer tools when looking at the response to the <code>https://www.youtube.com/live_chat?&hellip;</code> request.</p>
<p>This means that YouTube does not want a browser to embed this into an iframe except when embedded on youtube.com itself. (On YouTube itself, this embed code still works: when you inspect the source code of any currently streaming live video on YouTube, you will find that the live chat window there is made with that same <code>/live_chat?&hellip;</code> request, in an iframe.)</p>
<p>Additional indications that this feature has been removed:</p>
<ul>
<li><p>The YouTube documentation mentions:</p>
<blockquote>
<p>The Live chat module only exists on the YouTube watch pages &mdash; it does not follow embedded players. (source)</p>
</blockquote>
<p>I believe that's the new part of the documentation, and the section &quot;Embed live chat&quot; further down is outdated.</p>
</li>
<li><p>This tutorial from 2016 uses the documented URL format to embed an example live chat near the bottom, and it now shows the same &quot;Refused to display [&hellip;] in a frame because it set 'X-Frame-Options' to 'sameorigin'.&quot; Assuming that this worked in 2016, something must have changed on YouTube's side.</p>
</li>
<li><p>This Reddit thread tells how somebody's embedded live chat suddenly stopped working in early September 2018 &ndash; so shortly before this question got asked.</p>
</li>
</ul>
<h2>Alternatives</h2>
<ul>
<li><p>You could use the YouTube Livestream API, in particular the LiveChatMessages endpoint, to get and create chat messages. There are probably open source libraries around to help with this. So far, I found this one (able to display but not create chat messages).</p>
</li>
<li><p>You could embed your own chat, either installed on your own server or a cloud-hosted livestream chat solution. This solution can also provide features that YouTube live chat does not provide, such as allowing anonymous visitors to post.</p>
</li>
<li><p>You could reverse proxy the <code>https://www.youtube.com/live_chat?&hellip;</code> URL, forwarding YouTube's response but with the X-Frame-Options header removed.</p>
</li>
<li><p>If you only need a solution for one or a few computers, you could use a browser extension to remove the X-Frame-Options header from YouTube's response. See this question.</p>
</li>
</ul>
                                                                        <div class="appendcontent">
                                                        </div>
            </div>
            <div class="jieda-reply">
              <span class="jieda-zan button_agree" type="zan" data-id='876069'>
                <i class="iconfont icon-zan"></i>
                <em>0</em>
              </span>
                 <span type="reply" class="showpinglun" data-id="876069">
                <i class="iconfont icon-svgmoban53"></i>
               讨论(0)
              </span>
              
                                                   
              <div class="jieda-admin">
                                                            </div>
            </div>
                      <div class="comments-mod "  style="display: none; float:none;padding-top:10px;" id="comment_876069">
                    <div class="areabox clearfix">

<form class="layui-form" action="">
               
            <div class="layui-form-item">
    <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
    <div class="layui-input-block" style="margin-left:90px;">
         <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
                        <input type='hidden' value='0' name='replyauthor' />
    </div>
    <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="876069">提交评论 </span></div>
  </div>
  
</form>
                    </div>
                    <hr>
                    <ul class="my-comments-list nav">
                        <li class="loading">
                        <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' />
                        &nbsp;加载中...
                        </li>
                    </ul>
                </div>
          </li>
          	          
           <style>
   
.laypage-main a, .laypage-main span {
    display: inline-block;
}
        </style>                  </ul>
        
        <div class="layui-form layui-form-pane">
          <form id="huidaform"  name="answerForm"  method="post">
            
            <div class="layui-form-item layui-form-text">
              <a name="comment"></a>
              <div class="layui-input-block">
            
    
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script>
<script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script>
<script type="text/plain" id="editor"  name="content"  style="width:100%;height:200px;"></script>                                 
<script type="text/javascript">
                                 var isueditor=1;
            var editor = UE.getEditor('editor',{
                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                toolbars:[['source','fullscreen',  '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']],
            
                initialContent:'',
                //关闭字数统计
                wordCount:false,
                zIndex:2,
                //关闭elementPath
                elementPathEnabled:false,
                //默认的编辑区域高度
                initialFrameHeight:250
                //更多其他参数，请参考ueditor.config.js中的配置项
                //更多其他参数，请参考ueditor.config.js中的配置项
            });
                        editor.ready(function() {
            	editor.setDisabled();
            	});
                            $("#editor").find("*").css("max-width","362px");
        </script>              </div>
            </div>
                          
    

        
         <div class="layui-form-item">
                <label for="L_vercode" class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text"  id="code" name="code"   value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">
                  <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode"  href="javascript:updatecode();">&nbsp;看不清?</a></span>
                </div>
              </div>
                                  <div class="layui-form-item">
                    <input type="hidden" value="258582" id="ans_qid" name="qid">
   <input type="hidden" id="tokenkey" name="tokenkey" value=''/>
                <input type="hidden" value="How to embed youtube livestream chat" id="ans_title" name="title"> 
             
              <div class="layui-btn    layui-btn-disabled"  id="ajaxsubmitasnwer" >提交回复</div>
            </div>
          </form>
        </div>
      </div>
      <input type="hidden" value="258582" id="adopt_qid"	name="qid" /> 
      <input type="hidden" id="adopt_answer" value="0"	name="aid" />
    </div>
    <div class="layui-col-md4">
          
 <!-- 热门讨论问题 -->
     
 <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">热议问题</dt>
            <!-- 本周热门讨论问题显示10条-->