TIL. 04 HTML-練習(ビデオ、コメント、チャット)


🎥 ムービーを挿入

  • <iframe>Inline Frameの略で、Webブラウザに別のフレームワーク、すなわち別のHTMLページを挿入できます.(YouTube動画、地図など)
  • allowfullscreenフルスクリーン属性
  • <iframe width="560" height="315"
    src="https://www.youtube.com/embed/7T7r_oSp0SE"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media;
    gyroscope; picture-in-picture" allowfullscreen>
    </iframe>

    ビデオを挿入した結果


    😀 コメント機能

  • DISQUSサービス追加コメント機能
  • サービス加入後無料でコメントを得る
  • 次のコードを貼り付けますが、Webサーバのみで有効です(ハブで受信したアドレスを使用して有効です)
  • <div id="disqus_thread"></div>
    <script>
        /**
        *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
        *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
        /*
        var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };
        */
        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://web1-54hfxjuyrk.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

    コメント機能の追加



    💬 チャット機能


    tawkサービスによるコメント機能の追加
  • キーボードからのサービス管理
  • 訪問者に関する各種情報を収集可能
  • <!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/60782d41f7ce1827093ab701/1f3an1ip1';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
        })();
        </script>
        <!--End of Tawk.to Script-->

    チャット機能を挿入した結果


    右下のチャットアクティビティアイコン

    チャットウィンドウを有効にする