【徹底解説】YouTube埋め込み時のカスタマイズ：動画を魅力的に見せる技5つ②

YouTube

youtube man

埋め込み動画をさらに魅力的にカスタマイズするテクニックを紹介します。

CSSコード・Googleフォントなどの活用で、タイトルやディスクリプション（動画紹介文）のテキストを装飾したり、IFrame動画プレイヤーのプロパティ指定、そしてレスポンシブな画面比の変更まで、全ての要素にこだわります。

さらに、マウスクリックでディスクリプションの表示・非表示を切り替えるアニメーションも実装。動画をより、魅力的にする方法を一挙公開！します笑

コード全体
キャプションとディスクリプション
- 配置と装飾：視覚的な魅力を高めよう！
キャプションとディスクリプションのカスタマイズ
今回紹介するソースコード
おわりに

デモページを見る

コード全体

【徹底解説】YouTube埋め込み時のカスタマイズ：動画を魅力的に見せる技5つ ②

キャプションとディスクリプション

前回①の記事では、YouTube動画の埋め込みにおいて重要なプレイヤーの設定や縦横比変更に焦点を当て、魅力的な動画の見せ方について解説しました。また、キャプションとディスクリプションの重要性について、お話させていただきました。

前回の記事はこちら

今回は、その続編としてキャプションとディスクリプションの実際の配置と装飾手法について、コードを交えてご紹介します。動画を視覚的に際立たせ、彩るテクニックをお伝えします。

※なお、キャプション（caption）という言葉は、テレビや映画など映像において字幕一般を指して呼ぶ場合も多いですが、ここでは「動画のタイトルや見出し」という意味で、「写真や挿絵、図、表などの脇に添えられる、簡潔に説明した標題や短い文章」として取り扱います。ディスクリプションはそのまま、動画の「説明文や解説」として取り扱います。

配置と装飾：視覚的な魅力を高めよう！

視覚的なインパクトを高め、視聴者の興味を引きつける方法に焦点を当てていきます。動画と連動した素敵なデザインやテクニックを学んで、あなたのブログをより魅力的に彩りましょう。

それでは、早速見ていきましょう！皆さんも自分のブログに活かせるアイデアが見つかるかもｸﾞｯ(๑•̀ㅂ•́)و✧ しれませんね笑。お楽しみに！

キャプションとディスクリプションのカスタマイズ

Output

マウスホバーするとキャプションが浮き上がります。さらにクリックで、ディスクリプションが下にスライドして出現し、再度クリックすると閉じます。ディスクリプション下の画像も連動してスムースにスライドします。

※参考のため、動画プレイヤーも表示しています。

Tonight's Tune

ここにキャプションを書く。（動画タイトルなど）

ここにディスプリクションを書く。（動画説明・解説など）

今回紹介するソースコード

HTML

<div class="caption float-on-hover" onclick="toggleDescription()">
ここにキャプションを書く。（動画タイトルなど）<i class="fas fa-angle-double-down faa-falling animated"></i>
</div>
<div class="description">
ここにディスプリクションを書く。（動画説明・解説など）<i class="fas fa-angle-double-down faa-falling animated"></i>
</div>
<!-- 動画下画像 -->
<div class="separator">
  <img src="画像のＵＲＬ" alt="画像のalt属性"></a>
</div>

各部の解説:

. キャプション部分:

クリックで解説を開閉

   <div class="caption float-on-hover" onclick="toggleDescription()">
     ここにキャプションを書く。（動画タイトルなど）
     <i class="fas fa-angle-double-down faa-falling animated"></i>
   </div>

class="caption float-on-hover":
キャプションに CSSでスタイルを適用するためのクラス。
onclick="toggleDescription()":
キャプションをクリックした時（onclickイベント）に JavaScriptのtoggleDescription関数（任意の名前）を呼び出す。これにより、ディスクリプションの表示・非表示の切り替えを制御。
<i>要素:
「FontAwesome」アイコン。faa-falling animatedの部分でアニメーションを指定。（これについては次回③でまた、詳細ご紹介します。）

. ディスプリクション部分:

クリックで解説を開閉

   <div class="description">
     ここにディスプリクションを書く。（動画説明・解説など）
     <i class="fas fa-angle-double-down faa-falling animated"></i>
   </div>

class="description":
ディスクリプションに CSSでスタイルを適用するためのクラス。

. 動画下の画像部分:

クリックで解説を開閉

   <div class="separator">
     <img src="画像のＵＲＬ" alt="画像の代替テキスト">
   </div>

class="separator":
画像に CSSでスタイルを適用するためのクラス。
<img>要素で画像を定義。src属性には画像アドレス、alt属性には代替テキストを指定。

`alt`属性は、なくても画像は表示されます。しかし、何らかの理由で表示されなかった画像の代替テキスト、というだけでなく、 SEO的な観点からは検索エンジンのクローラーに画像の内容を教えるという意味があり、また、目の不自由なユーザーが音声読み上げでブラウザ閲覧している際など、重要な情報となるため、記述することが推奨されます。(„◕᎑◕„)⸝⸝꙳ｸﾞｯ

これらの要素は、CSS・JavaScriptと組み合わせ、クリックやホバーなどのイベントに反応してスタイルやアニメーションが適用され、ユーザーエクスペリエンスを向上させる目的で使われています。

HTML ココまで

CSS

クリックでコードを開閉

/* キャプションのメインスタイル */
.caption {
  background-color: rgba(0, 0, 0, 0.7);  /* 背景色（透過） */
  color: white;  /* フォントの色 */
  border-radius: 0px 0px 5px 5px;
  margin: -1px 0 0px 0;
  max-width: 100%;
  display: inline-flex;
  padding: 3px 45px 3px 20px;
  text-align: center;  /* テキストをセンター寄せに */
  flex-direction: column;
  z-index: 1;
  position: relative;
  cursor: pointer;  /* クリック可能な要素としてカーソルを変更 */
}

/* キャプションをマウスオーバーした時のスタイル */
.float-on-hover {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;  /* 位置や外見の変化をスムースにする */
  transform: translateY(0);
}
.float-on-hover:hover {
  transform: translateY(-5px);  /* 位置を少し上に移動 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);  /* 影を付ける */
}

/* ディスクリプションのメインスタイル */
.description {
  margin: -3px 0 20px 0;
  text-align: left;  /* テキストを左寄せ */
  font-family: 'Kaisei Decol', serif;  /* フォント指定 */
  font-size: 14px;  /* フォントサイズ */
  border: solid;
  border-color: lightsalmon;  /* 外枠の線の色 */
  border-radius: 0 0 5px 5px;
  padding: 10px 20px;
  max-width: 500px;  /* ディスクリプション全体の幅 */
  display: inline-flex;
  position: relative;
  opacity: 0;
  transition: bottom 0.5s, opacity 0.5s, margin-top 0.5s;  /* スライドアニメーションをスムースにする */
}

/* ディスクリプションのスライドアニメーション */
@keyframes scrollDown {
  0% {
    bottom: 55vh;
    opacity: 0;
    margin-top: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
    margin-top: 20px;  /* 必要に応じて値を調整 */
  }
}

/* アニメーションするアイコン（FontAwesome）の位置指定 */
i.fas.fa-angle-double-down.faa-falling.animated {
  position: absolute;
  right: 10px;
  top: 8px;
}

/* ディスクリプション下の画像設定 */
.separator {
  clear: both;
  margin-top: -400px;  /* 説明が閉じている状態の上要素とのマージン（間隔） */
  transition: margin-top 0.5s;  /* スライドアニメーションをスムースにする */
}
div.separator img {
  position: relative;
  display: block;
  margin: 0 auto;  /* 左右センター合わせ */
  width: 600px;  /* 画像の幅 */
}

この CSSコードは、キャプションとディスクリプションを装飾し、マウスホバー時にキャプションが浮き上がったり、キャプションをクリックした際にディスクリプションがスライドする部分の動き（アニメーション）も付与しています。

以下に主な部分の解説をします。

各部の解説:

. キャプションのメインスタイル:

クリックで解説を開閉

   .caption {
     /* ... */
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
     border-radius: 0px 0px 5px 5px;
     /* ... */
   }

background-color: キャプションの背景色を半透明（rgba(0, 0, 0, 0.7)）で指定。
color: フォント色を白に設定。
border-radius: 要素の角を丸く指定。

. キャプションをマウスオーバーした時のスタイル:

クリックで解説を開閉

   .float-on-hover {
     /* ... */
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     /* ... */
   }
   .float-on-hover:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
   }

transition: マウスオーバー時のアニメーションを指定。transform（移動）とbox-shadow（影を付ける）の変化をスムースに。
:hover: マウスオーバー時のスタイルを指定。ここでは要素が上に 5px移動し、さらに影を付与。

. ディスクリプションのメインスタイル:

クリックで解説を開閉

   .description {
     /* ... */
     text-align: left;
     font-family: 'Kaisei Decol', serif;
     font-size: 14px;
     border: solid;
     border-color: lightsalmon;
     /* ... */
   }

text-align: ディスクリプション内のテキストを、左寄せに。
font-family: 「Googleフォント」を利用。'Kaisei Decol'の部分で使用するフォントを指定。（これについては次回③でまた、詳細ご紹介します。）
font-size: フォントのサイズを指定。

. ディスクリプションのスライドアニメーション:

クリックで解説を開閉

   @keyframes scrollDown {
     0% {
       bottom: 55vh;
       opacity: 0;
       margin-top: 0;
     }
     100% {
       bottom: 0;
       opacity: 1;
       margin-top: 20px;
     }
   }

@keyframes: スライドアニメーションのキーフレームを定義しています。scrollDownという名前のアニメーションです。この「scrollDown」の部分は、開発者があくまで任意に付けた名前で、動きと関連した、後々分かりやすい名前を付けています。つまり、あらかじめ用意されたプログラム言語ではなく、同様に任意で付けるclass名やid名などのイメージです。

. アイコン位置の指定:

クリックで解説を開閉

   i.fas.fa-angle-double-down.faa-falling.animated {
     position: absolute;
     right: 10px;
     top: 8px;
   }

FontAwesomeアイコンの位置を指定。position: absoluteは親要素（キャプションを囲むdivタグ）に対する絶対位置。つまり、キャプション全体の右端から10px左、上端から8px下の位置に、アイコンを配置しているということになります。

これらのスタイルとアニメーションは、キャプションとディスクリプションに動きや見栄えを与え、ユーザーエクスペリエンスを向上させています。

マイクロデータについて

ちなみに、はてなで画像を貼り付けた際にデフォルトで付いてくるitemprop="image"という属性ですが、

このitemprop="image"は、HTML の<meta>タグや<span>タグ、<div>タグなどに使用される Microdata（マイクロデータ）の属性の1つです。Microdata は、ウェブページ上のデータを構造化して機械可読にするための仕様の一部です。

具体的には、itemprop属性は、対応する値が何を表しているかを示すものであり、"image"の場合、その要素が関連するアイテムの画像を表していることを示します。これにより、検索エンジンや他のウェブサービスがコンテンツを理解しやすくなり、検索結果や他のアプリケーションにおいて、より意味のある情報を提供できるようになります。

以下は、例として<span>要素内にitemprop="image"が使われる場合のコードです：

<span itemprop="image">
  <img src="example.jpg" alt="Example Image">
</span>

この例では、<span>要素がitemprop="image"を持ち、その中に画像（<img>要素）が含まれています。これにより、この画像がMicrodataにおいて「image」に関連するものであることが示されます。

こちらも、alt同様、SEO的には付けておいた方が良い、訳ですね♪

CSS ココまで

JS (JavaScript)

クリックでコードを開閉

// ディスクリプションを表示・非表示にするための関数
function toggleDescription() {
  // 要素を取得
  var description = document.querySelector('.description');
  var image = document.querySelector('.separator');

  // ディスクリプションが非表示または透明の場合、
  if (description.style.opacity === '0' || !description.style.opacity) {
    // ディスクリプションを表示
    description.style.bottom = '0';
    description.style.opacity = '1';
    // 画像を下へ移動
    image.style.marginTop = '20px';
  // ディスクリプションが表示されている場合、
  } else {
    // ディスクリプションを非表示
    description.style.bottom = '55vh';
    description.style.opacity = '0';
    // 画像を上へ移動
    image.style.marginTop = '-400px';
  }
}

この JavaScriptコードは、特定の要素（キャプション）をクリックしたときに、ウェブページ上の要素（ディスプリクション）の動作を変更するためのものです。

以下に、コードの説明を記載します。

クリックで解説を開閉

toggleDescription関数:
- .descriptionというクラスが付いた要素（ディスクリプションの部分）と、.separatorというクラスが付いた要素（動画下画像のセパレータ）の表示・非表示を切り替えます。
- ディスクリプションが非表示または透明の場合、それを表示し、画像を下に移動させます。逆に説明が表示されている場合は、それを非表示にし、画像を上に移動させます。

これにより、ウェブページ上で特定の要素の動作を変更し、ユーザーエクスペリエンスを向上させる効果が期待されます。

よっぴの画像