youtubeにチャプターを付けて埋め込むまとめ

１．構成のポイント
１）ページの識別
　はてなブログのトップページは、同じウインドウに複数のページを読み込む
　このためyoutube埋込ページを重複して読み込まれるとプレーヤーが動かなくなったりレイアウトが崩れたりする
　トップページの構成はこんな感じ

<article class="entry hentry … ">
  
  <div class="entry-content">
    <!-- 1頁目 -->
  </div>

</article>

<article class="entry hentry … ">

  <div class="entry-content">
    <!-- 2頁目 -->
  </div>

</article>

　対策として各ページに個別のIDを付けて識別する
　今回はclass名 "entry-content" が現れる回数をIDにした

//    get number of entry-content for make TAG-SHEET
//      num_entry:タグシート作成用  entry-content出現順番号 - 1
elements_entry = document.getElementsByClassName("entry-content");
num_entry = elements_entry.length - 1;

２）youtube APIの読み込み part01仕様
　スクリプトも複数ページ読み込みで重複して読み込まれるため対応が必要
　IFrame Player API読み込みは初回のみとする
　他の関数は、IDで識別できるようにしておく

//  youtube API
//  2. This code loads the IFrame Player API code asynchronously.
//    【caution】初回のみ実行
if(index_entry_si == 1) {   // ? 1st entry ここは初回のみ実行
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

【注意事項】
・関数名が重複する場合は、最後に読み込まれた関数が有効となるので配慮する
・コールバック関数からのアクションに重複変数を使わない

３．トラップメモ
①問題
②調査結果
③対応
３−１．レイアウト
１）buttonを横並び均等幅でレイアウトする
①思うように配置できない
②buttonは余白が広がらない
③radio buttonを使う
　・ul li タグでレイアウトする
　・テキストはemを使う（labelタグが重複せずcssで設定しやすいので）

３−２．スクリプト
１）radio button onClick イベントによる iframe の起動
①scriptタグは使わず簡便に radio button onClick で iframe を起動したい
②どうやれば？
③onClick="" に直接javascriptを書く
　・例

    <input onClick="window.open('https://www.youtube.com/embed/xxxx','Change','')" … >
    <iframe name="Change" … >

２）.addEventListenerでfunctionにイベント情報を渡す
①イベント処理関数にイベント情報を渡したい
②どうやれば？
③無名関数のパラメータを使う
　・例

  input_radio.addEventListener("click", function (event) {
    set_start_time(event);
  });

  function  set_start_time(event)  {
    var btn_id = event.target.id;     // action ID を取得する

３）変数未定義を判定する
①複数ページ読込に対応するため変数が定義されているかどうかで処理を分けたい
②どうすれば？
③if(typeof 変数名 === "undefined")

３−３．はてなブログのトラップ
１）タグ消失
①onClickを消される
②仕様
③document.write又はjavascriptで書く
document.writeで書く時に " ' () は\でエスケープする

２）CSSを適用する全般
①javascriptで記述したタグにCSSが適用されない
②class指定が違う
③本文は class名 "entry-content" のdivタグ内にあるのでこのタグの子要素にする

  var elements_div_entry = document.getElementsByClassName("entry-content");
  var div_tag = document.createElement('div');
  div_tag.className = div_class_name;
  div_tag.id = 'div_tag';
  elements_div_entry[0].appendChild(div_tag);

３）CSSを適用する liタグ
①li タグの「・」が消えずレイアウトが崩れる
②後出しでstyleを変えているみたい
③!important で設定

/*  li tag  */
.iframe_tab li  {
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

４）レイアウト
①余白が追加される
②htmlのコメント行間にpタグを突っ込まれる
③コメント行をなくす

５）キーワードリンク
①ボタンのテキストにキーワードリンクが貼られてボタンとして機能しない
②仕様
③無効にする jsを追記

//
//  ClassName("entry-content")内にあるClassName("keyword")のaタグをテキストだけにする
//
<script type="text/javascript">
// <![CDATA[
addEventListener(
  "DOMContentLoaded",
  function(){
    var a=document.getElementsByClassName("entry-content");
    if(a)
    for(var i=0;i<a.length;i++)
      for(var b=a[i].getElementsByClassName("keyword");b.length;)
        b[0].outerHTML=b[0].textContent},
  !1);
// ]]>
</script>

【参考資料】
iframe 組み込みの YouTube Player API リファレンス
developers.google.com

はてなのキーワードリンクを消すなら CSS よりも JavaScript で。一掃するとスッキリしすぎて怖い
holic.hateblo.jp

おしまい

1 2 3

圏9研究所工作室

圏9研究所の開発情報資料など

youtubeにチャプターを付けて埋め込むまとめ