Fix bug: Stop lazyloading for YouTube Embedded Player due to hangup on some web browsers like Web Viewer and Safari

Author: yasulab

app/views/pokemons/workshop.html.erb

@@ -12,7 +12,7 @@
     <p style="padding-bottom: 20px; font-size: 95%;">
       『プログラミングでポケモンをうごかしてみよう』のワークショップ事例を載せています。<br><br class="ignore-pc" />ワークショップ開催を検討している CoderDojo 関係者の参考になれば幸いです。
       <div class="home-point-video">
-        <iframe class="lazyload" loading="lazy" width="697" height="392" src="https://www.youtube.com/embed/Wr-z-QE-k8s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1"></iframe>
+        <iframe loading="lazy" width="100%" src="https://www.youtube.com/embed/Wr-z-QE-k8s" title="出張ポケモンワークショップ @ 大津ヶ丘第一小学校" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1"></iframe>
       </div>
       <div class="btn-cover">
         <a class="btn-blue" style="padding: 12px 0px;" href="https://www.youtube.com/watch?v=Wr-z-QE-k8s">

public/docs/.#_about-coderdojo-japan-2017.md

@@ -57,8 +57,7 @@ CoderDojo Japan では、定款に定められた事業内容にしたがって
 CoderDojo Japan への応募・参加について、ビデオメッセージを収録してみました。こちらもよければ視聴していただけると嬉しいです ;)
 
 <div class="home-point-video">
-<iframe width="560" height="315" 
-src="https://www.youtube.com/embed/IZxdBlcY4iw?rel=0" frameborder="0" allowfullscreen></iframe>
+<iframe width="100%" src="https://www.youtube.com/embed/IZxdBlcY4iw?rel=0" frameborder="0" allowfullscreen></iframe>
 </div>
 
 ### 応募書類・結果について

public/docs/_about-coderdojo-japan-2017.md

@@ -24,9 +24,8 @@ In-person meeting is also welcome! If you are around Tokyo, feel free to drop by
 ## [<i class="fa-solid fa-yin-yang"></i>️](#about) CoderDojo one-minute video {#about}
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-   data-src="https://www.youtube.com/embed/GjdRWcdw-N4?list=PL94GDfaSQTmKzw7RLjbmUgl8VyfBR9E8e&cc_load_policy=1&cc_lang_pref=en&rel=0" allowfullscreen></iframe>
+  <iframe frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+   src="https://www.youtube.com/embed/GjdRWcdw-N4?list=PL94GDfaSQTmKzw7RLjbmUgl8VyfBR9E8e&cc_load_policy=1&cc_lang_pref=en&rel=0" allowfullscreen></iframe>
 </div>
 
 <div class="btn-cover" style="margin-top: 40px;">

public/docs/_calendar-english.md

@@ -63,8 +63,7 @@ CoderDojo は、主に7〜17歳を対象とした子どものためのプログ
 <br>
 
 <div class="home-point-video">
-  <iframe width="560" height="315" class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/HQhIjnrF6mQ?rel=0" allowfullscreen></iframe>
+  <iframe width="100%" frameborder="0" src="https://www.youtube.com/embed/HQhIjnrF6mQ?rel=0" allowfullscreen></iframe>
 </div>
 <center>
   <a href='https://www.youtube.com/watch?v=HQhIjnrF6mQ'>
@@ -142,8 +141,7 @@ [email protected]
 <!--
 ### 10周年記念のメッセージ動画
 <div class="home-point-video">
-  <iframe width="560" height="315" class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/SrakeakMlys?rel=0&start=488" allowfullscreen></iframe>
+  <iframe width="100%" frameborder="0" src="https://www.youtube.com/embed/SrakeakMlys?rel=0&start=488" allowfullscreen></iframe>
 </div>
 -->
 
@@ -165,8 +163,7 @@ [email protected]
 <br>
 
 <div class="home-point-video">
-  <iframe width="560" height="315" class='lazyload' frameborder="0" 
-   data-src="https://www.youtube.com/embed/fcIVHHeKQLQ?rel=0" allowfullscreen></iframe>
+  <iframe width="100%" frameborder="0" src="https://www.youtube.com/embed/fcIVHHeKQLQ?rel=0" allowfullscreen></iframe>
 </div>
 <a href="/podcasts/19"><img class="lazyload" data-src="/img/DojoCast_019_shownote.png" /></a>
 
@@ -178,8 +175,7 @@ [email protected]
 - **A.** はい、隔週の定例ミーティング (定例会) があります。原則オンラインで行われ、これまでのところ、平日の日中に時間を合わせて実施することが多いです。具体的な雰囲気は下記の YouTube 動画「<a href="/podcasts/26">公開定例会</a>」をご参照ください 👥
 
 <div class="home-point-video">
-  <iframe width="560" height="315" class='lazyload' frameborder="0" 
-   data-src="https://www.youtube.com/embed/xn5Y5OTvRZU?rel=0" allowfullscreen></iframe>
+  <iframe width="100%" frameborder="0" src="https://www.youtube.com/embed/xn5Y5OTvRZU?rel=0" allowfullscreen></iframe>
 </div>
 
 <!--![定例会の様子 - esa.io](/img/board-meetup-sample.png)-->

public/docs/about-coderdojo-japan.md

@@ -17,9 +17,8 @@ This page briefly explains about [the CoderDojo community](#about), [its growth
 
 ### [<i class="fa-brands fa-youtube"></i>️](#video) English 1-minute video with Japanese subtitles {#video}
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-   data-src="https://www.youtube.com/embed/GjdRWcdw-N4?list=PL94GDfaSQTmKzw7RLjbmUgl8VyfBR9E8e&cc_load_policy=1&cc_lang_pref=en&rel=0" allowfullscreen></iframe>
+  <iframe frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+   src="https://www.youtube.com/embed/GjdRWcdw-N4?list=PL94GDfaSQTmKzw7RLjbmUgl8VyfBR9E8e&cc_load_policy=1&cc_lang_pref=en&rel=0" allowfullscreen></iframe>
 </div>
 
 <br>
@@ -135,51 +134,44 @@ For more detailed information, please refer to the following reports, articles,
 We occasionally host guests from overseas at our co-working and shared-office space, [CASE Shinjuku](https://case-shinjuku.com/english), in Tokyo. You can look back on our past meetups on [YouTube](https://www.youtube.com/coderdojojapan).
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/JS60C033f0g?list=PL94GDfaSQTmKxMzXVMzzdl-zCmzgitQFP&start=0&cc_load_policy=1&cc_lang_pref=en" title="CoderDojo Meetup with Bill Liao (@liaonet) in 2024"
+  <iframe frameborder="0" src="https://www.youtube.com/embed/JS60C033f0g?list=PL94GDfaSQTmKxMzXVMzzdl-zCmzgitQFP&start=0&cc_load_policy=1&cc_lang_pref=en" title="CoderDojo Meetup with Bill Liao (@liaonet) in 2024"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
 </div>
 
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/8NoL2uRk0PY?list=PL94GDfaSQTmK6xzLNsBMx8gkKrT2HiZ9D&start=60&cc_load_policy=1&cc_lang_pref=en" title="The 1st CoderDojo and the Global Vision - @liaonet"
+  <iframe frameborder="0" src="https://www.youtube.com/embed/8NoL2uRk0PY?list=PL94GDfaSQTmK6xzLNsBMx8gkKrT2HiZ9D&start=60&cc_load_policy=1&cc_lang_pref=en" title="The 1st CoderDojo and the Global Vision - @liaonet"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
 </div>
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/KqtRuCdVFws?start=803&rel=0&cc_load_policy=1&cc_lang_pref=en"
+  <iframe frameborder="0" src="https://www.youtube.com/embed/KqtRuCdVFws?start=803&rel=0&cc_load_policy=1&cc_lang_pref=en"
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
 </div>
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/PrS2g795yZY?list=PL94GDfaSQTmKosrkjpooz71nwWJbguLWJ&rel=0&cc_load_policy=1&cc_lang_pref=en"
+  <iframe frameborder="0" src="https://www.youtube.com/embed/PrS2g795yZY?list=PL94GDfaSQTmKosrkjpooz71nwWJbguLWJ&rel=0&cc_load_policy=1&cc_lang_pref=en"
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
 </div>
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/2Ub1Ny87hl0?list=PL94GDfaSQTmL1ne3U8tRoz9IavydP7onH&cc_load_policy=1&cc_lang_pref=en" title="Penang Science Cluster Meets CoderDojo Japan by Aimy Lee (Talk) - Code Club &amp; CoderDojo meetup"
+  <iframe frameborder="0" src="https://www.youtube.com/embed/2Ub1Ny87hl0?list=PL94GDfaSQTmL1ne3U8tRoz9IavydP7onH&cc_load_policy=1&cc_lang_pref=en" title="Penang Science Cluster Meets CoderDojo Japan by Aimy Lee (Talk) - Code Club &amp; CoderDojo meetup"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
 </div>
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/2YxzgzGonD0?list=PL94GDfaSQTmJZFLMQ3YH9CE2liETLi0Uq&cc_load_policy=1&cc_lang_pref=en" title="Meetup with Zach, founder of Hack Club"
+  <iframe frameborder="0" src="https://www.youtube.com/embed/2YxzgzGonD0?list=PL94GDfaSQTmJZFLMQ3YH9CE2liETLi0Uq&cc_load_policy=1&cc_lang_pref=en" title="Meetup with Zach, founder of Hack Club"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
 </div>
 
 <div class="home-point-video">
-  <iframe class='lazyload' frameborder="0"
-   data-src="https://www.youtube.com/embed/Kvc6KhOzHmY?list=PL94GDfaSQTmLpQpm8R7nHpwVKFNLdnZFU&cc_load_policy=1&cc_lang_pref=en" title="Ross &amp; James (1/5): CoderDojo A Global Movement"
+  <iframe frameborder="0" src="https://www.youtube.com/embed/Kvc6KhOzHmY?list=PL94GDfaSQTmLpQpm8R7nHpwVKFNLdnZFU&cc_load_policy=1&cc_lang_pref=en" title="Ross &amp; James (1/5): CoderDojo A Global Movement"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
 </div>

public/docs/english.md

@@ -9,7 +9,7 @@
 ## 🗣 動画版
 
 <div class='home-point-video'>
-  <iframe class='lazyload' loading='lazy' src="https://www.youtube.com/embed/B96S3Z1zsq4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <iframe loading='lazy' src="https://www.youtube.com/embed/B96S3Z1zsq4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <br>
@@ -64,7 +64,7 @@
 次のデモ動画を見てもらうと分かりやすいのですが、Ruby/Rails を Cloud-Based CMS として活用できるようにするプロ向けの有料サービスです。
 
 <div class='home-point-video'>
-  <iframe class='lazyload' loading='lazy' src="https://www.youtube.com/embed/gsjt5ykGPgA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <iframe loading='lazy' src="https://www.youtube.com/embed/gsjt5ykGPgA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 2016年にリリースされたばかりのサービスですが、豊富なプラグイン機能や開発者と直接話せるサポート体制もあり、順調に[採用事例も増えている](https://scrivito.com/customers)ようです。ただ、これだけ充実していることもあってか、[お値段もそれなり](https://scrivito.com/pricing)にします 💸

public/docs/post-backend-update-history.md

@@ -17,7 +17,7 @@ Guest: [Bill Liao](https://twitter.com/liaonet), co-founder of [CoderDojo](https
 ## 🎥 Watch on YouTube
 
 <div class="home-point-video">
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/8NoL2uRk0PY?list=PL94GDfaSQTmK6xzLNsBMx8gkKrT2HiZ9D&rel=0&start=16" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <iframe width="100%" src="https://www.youtube.com/embed/8NoL2uRk0PY?list=PL94GDfaSQTmK6xzLNsBMx8gkKrT2HiZ9D&rel=0&start=16" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <br>