YouTubeを飾ってみる

投稿 2018年09月27日
3
カスタマイズ
InstructionYouTubeHTMLCSS初心者向け

今回は完全に遊びです。
YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・`)

独自クラス .box-for-video がテンプレートCSSに含まれていることを前提としています。
また、旧投稿画面をご利用の方は「改行の扱い」を「HTMLのみ」に設定してください。

レスポンシブ動画のための独自クラスです。全てのテンプレートに含めているわけではないので事前に確認してください。
含まれない場合は以下の記事を参照、追加してくださいね。

あなたのブログの動画はスマートフォンではみ出してるかもしれない

めちゃくちゃ多いんですよ。スマートフォンで動画がはみ出している 方。 今もう モバイル最優先 という時代ですが、ブログなどの記事はパソコンで書いているという方もまだ多いと思います。 スマホで長文ってキッツいですよねぇ (´・ω・`) パソコンで書いているとやっぱりパソコンの見た目に集中してしまいます。 スマホはパソコンと比べたらめっちゃ画面小さいんやで! というのを忘れてしまう。 というわけで対処...

埋め込みコード取得

ご存知だろうとは思いますが一応説明。
「埋め込む」をクリックすると、
iframe要素でhtmlコードが出てきますのでそれをコピー。
これからご紹介するソースコード内にある「埋め込みコード」はこのiframe要素を指します。

素材のダウンロード

装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。

それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。

YouTube装飾いろいろ

<style>
.both-wrapper {
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: calc(56.25% - calc(203 / 570 * 50%) + 30px);/* 最後の30pxが後続要素との距離 */
}

.videoimage-wrapper::before {
  content: "";
  display: block;
  padding-top: calc(203 / 570 * 100%);
}

.videoimage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 100%;
}
</style>

<div class="both-wrapper">
  <div class="videoimage-wrapper">
    <img class="videoimage" src="画像URL" alt="">
    <div class="iframe-wrapper">
      <div class="box-for-video">
        埋め込みコード
      </div>
    </div>
  </div>
</div>

素材DL (実寸: 570×203)

そうしょっちゅうやらないでしょうからスタイリングはスタイルシートに含めずに記事編集画面にベタ貼りで良いと思います。つまりstyle要素を利用してください。
抵抗のある方は <style> から </style> までの内容を開始タグ終了タグを削除した上でスタイルシート末尾に追加。

四則計算など複雑なことをやっていますが特に難しい内容ではないです。
カスタマイズするとすればコメントの 最後の30pxが後続要素との距離 の部位と全体幅ぐらいかなぁと思います。
後続要素との距離を増やしたければ 30px の部分を例えば 50px などに変更してください。30px の前に書いてあるゴニョゴニョは触らない方が良いと思います。
全体幅はデフォルトで 500px に設定してあります。お好みで変更してください。
装飾用画像の実寸が横570pxなので570px以内が妥当だと思います(それ以上の数値だと画像が拡大されることになり解像度が落ちます)

<style>
.both-wrapper2 {
  position: relative;
  width:100%;
  max-width: 500px;/* 全体幅 */
  margin: 0 auto 30px;/* 30pxが後続要素との距離 */
}

.width-adjust iframe {
  z-index: 1;
}

.videoimage-border1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  pointer-events: none;
}

.videoimage-border2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(-1, 1);
  pointer-events: none;
}

.videoimage-border3 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(1, -1);
  pointer-events: none;
}

.videoimage-border4 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(-1, -1);
  pointer-events: none;
}
</style>

<div class="both-wrapper2">
  <img class="videoimage-border1" src="画像URL" alt="">
  <img class="videoimage-border2" src="画像URL" alt="">
  <img class="videoimage-border3" src="画像URL" alt="">
  <img class="videoimage-border4" src="画像URL" alt="">
  <div class="box-for-video width-adjust">
    埋め込みコード
  </div>
</div>

素材DL (実寸: 150×150)

ひとつ余分なwrapperが付いていますが動画のlazyloadingを利用したい方のために付けています。

lazysizesで掲載したYouTubeがiOSで再生できない件について

うーーん。これは困りました (´・ω・`) lazysizesで遅延読み込みを指定しているYouTubeがiPhoneで再生できないようです。 「YouTubeが」「iOSで」と書いていますが、その他動画サービス及びAndroid OSでは未検証なのでこの表現を取っています。 パソコンでの再生は問題ありません。...

<style>
.both-wrapper2 {
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper2 {
  position: relative;
  width: 100%;
  margin-bottom: calc(56.25% - calc(280 / 500 * 40%) + 30px);/* 最後の30pxが後続要素との距離 */
}

.videoimage-wrapper2::before {
  content: "";
  display: block;
  padding-top: calc(280 / 500 * 100%);
}

.videoimage-cage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper2 {
  position: absolute;
  top: 60%;
  left: 0;
  z-index: 1;
  width: 100%;
}
</style>

<div class="both-wrapper2">
  <div class="videoimage-wrapper2">
    <img class="videoimage-cage" src="画像URL" alt="">
    <div class="iframe-wrapper2">
      <div class="box-for-video">
        埋め込みコード
      </div>
    </div>
  </div>
</div>

素材DL (実寸: 500×280)

<style>
.both-wrapper3 {
  position: relative;
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper3 {
  position: relative;
  width: 100%;
  margin-bottom: calc(56.25% - calc(107px / 2) + 30px);/* 最後の30pxが後続要素との距離 */
  text-align: center;
}

.videoimage-wrapper3::before {
  content: "";
  display: inline-block;
  width: 67px;
  height: 107px;
}

.videoimage-pin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 67px;
  height: 107px;
  margin: auto;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper3 {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 100%;
}
</style>

<div class="both-wrapper3">
  <div class="videoimage-wrapper3">
    <img class="videoimage-pin" src="画像URL" alt="">
    <div class="iframe-wrapper3">
      <div class="box-for-video">
        埋め込みコード
      </div>
    </div>
  </div>
</div>

素材DL (実寸: 67×107)

<style>
.both-wrapper4 {
  position: relative;
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper4 {
  position: relative;
  width: 80%;
  margin: 0 auto calc(60% - calc(320 / 570 * 45%) + 30px);/* 最後の30pxが後続要素との距離 */
}

.videoimage-wrapper4::before {
  content: "";
  display: block;
  padding-top: calc(320 / 570 * 100%);
}

.videoimage-heart {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper4 {
  position: absolute;
  top: 55%;
  left: 0;
  z-index: 1;
  width: 100%;
}
</style>

<div class="both-wrapper4">
  <div class="videoimage-wrapper4">
    <img class="videoimage-heart" src="画像URL" alt="">
  </div>
  <div class="iframe-wrapper4">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
</div>

素材DL (実寸: 570×320)

まとめ

lazyloading動画に対応できるよう複雑な内容になっています。
書き換える方は「埋め込みコード」のiframe要素を含むbox-for-videoクラスのついたdiv要素をlazysizes vedeo embedのdiv要素に変更してください。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

3 COMMENTS

There are no comments yet.

きろろ  

ご無沙汰しております

YouTubeを飾ってみる!
いいですね! 最近忙しくて、ブログの更新もままならないのですが、
是非使ってみたいです。
以前に教えてもらった装飾枠もいいですけどねえ((o(。・ω・。)o))ウキウキ

2018/10/15 (Mon) 03:14
vanillaice (Akira)

Akira  

To きろろさん

ご無沙汰しております ('0')/

やり過ぎると鬱陶しいかもしれませんがたまには良いかもしれません。
私も最近バタバタしてなかなかログインできない… ( ̄∀ ̄;)

2018/10/16 (Tue) 00:53

きろろ  

To Akiraさん

飾ってみました(。・ω・。)
最近、超耳にする米津さんを飾ってみましたよ。
一応お知らせまでにm(_ _)m

2018/10/20 (Sat) 02:40