YouTubeを飾ってみる その9

YouTubeを飾ってみる その9

カスタマイズ
2019/09/25 0
vanillaice (Akira)
vanillaice (Akira)
YouTube Playground 初心者向け Instruction HTML CSS

メッセージボードとお揃いのYouTube装飾第9段、秋仕様です。

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

この装飾を利用した動画を「本文」の最初に掲載した場合、サムネイル対象画像(OGP含む)が動画にくっついている装飾画像になります。
それを避けたい場合には動画掲載よりも先に意図的に別の画像を指定するか、「アイキャッチ画像」の機能を利用してください

レスポンシブに加えLazysizesのvedeo embedを利用可能にするため若干複雑なコード内容になっています。vedeo embedで埋め込む場合は「埋め込みコード」のiframe要素を含むbox-for-videoクラスのついたdiv要素をlazysizes vedeo embedのdiv要素に変更してください。
また、装飾用画像もimgなのでlazyloadingにできます。

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

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

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

埋め込みコード取得

詳細は以下の記事をご参照ください。

YouTubeを飾ってみる

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

素材のダウンロード

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

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

メッセージボードとお揃いですので、セットで利用する場合は同じ画像を二度DLする必要はありません。

YouTube装飾いろいろ

スタイリングについては、使用頻度が高い場合には CSS雛形 の方をスタイルシート末尾に追加します。
使用頻度の低い場合には スタイル用JS記事編集画面、使用する動画装飾htmlの直下 に記載してください。「CSS雛形」「スタイル用JS」両方ではなくいずれかを選択してください。

ペンダント

【html】
注)埋め込みコード, 画像アドレス記載箇所あり(画像 1箇所)

<div class="all-wrapper-9th-1" style="max-width: 500px;"><!-- max-widthは全体幅指定 -->
  <div class="videoimage-wrapper-9th-1">
    <img class="videoimage-9th-1" src="画像URL" alt="">
  </div>
  <div class="iframe-wrapper-9th-1">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
</div>

【スタイル用JS】(記事末尾に記載)

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-9th-1{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;margin:30px auto}.videoimage-wrapper-9th-1{position:relative;z-index:2;width:100%;pointer-events:none}.videoimage-9th-1{width:100%}.iframe-wrapper-9th-1{width:100%;margin-top:-58%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)

.all-wrapper-9th-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin: 30px auto;
}

.videoimage-wrapper-9th-1 {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}

.videoimage-9th-1 {
  width: 100%;
}

.iframe-wrapper-9th-1 {
  width: 100%;
  margin-top: -58%;
}

【素材DL】

画像 (547×394)

枯れ葉

【html】
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像 1箇所)

<div class="all-wrapper-9th-2" style="max-width: 500px;"><!-- max-widthは全体幅指定 -->
  <div class="iframe-wrapper-9th-2">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
  <div class="videoimage-wrapper-9th-2">
    <img class="videoimage-9th-2" src="画像URL" alt="">
  </div>
</div>

【スタイル用JS】(記事末尾に記載)

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-9th-2{margin:30px auto}.videoimage-wrapper-9th-2{position:relative;z-index:2;width:50%;margin:-20% 0 0 auto;pointer-events:none}.videoimage-9th-2{width:100%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)

.all-wrapper-9th-2 {
  margin: 30px auto;
}

.videoimage-wrapper-9th-2 {
  position: relative;
  z-index: 2;
  width: 50%;
  margin: -20% 0 0 auto;
  pointer-events: none;
}

.videoimage-9th-2 {
  width: 100%;
}

【素材DL】

画像 (344×231)

ペーパー

【html】
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像 1箇所)

<div class="all-wrapper-9th-3" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
  <div class="iframe-wrapper-9th-3">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
  <div class="videoimage-wrapper-9th-3">
    <img class="videoimage-9th-3" src="画像URL" alt="">
  </div>
</div>

【スタイル用JS】(記事末尾に記載)

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-9th-3{display:flex;justify-content:space-between;margin:30px auto}.iframe-wrapper-9th-3{width:90%}.videoimage-wrapper-9th-3{position:relative;z-index:2;width:40%;margin:7% 0 0 -30%;pointer-events:none}.videoimage-9th-3{width:100%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)

.all-wrapper-9th-3 {
  display: flex;
  justify-content: space-between;
  margin: 30px auto;
}

.iframe-wrapper-9th-3 {
  width: 90%;
}

.videoimage-wrapper-9th-3 {
  position: relative;
  z-index: 2;
  width: 40%;
  margin: 7% 0 0 -30%;
  pointer-events: none;
}

.videoimage-9th-3 {
  width: 100%;
}

【素材DL】

画像 (291×401)

ハート

【html】
注) 画像アドレスを入れる箇所あり (画像 1箇所)

<div class="all-wrapper-9th-4" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
  <div class="iframe-wrapper-9th-4">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
  <div class="videoimage-wrapper-9th-4">
    <img class="videoimage-9th-4" src="画像URL" alt="">
  </div>
</div>

【スタイル用JS】(記事末尾に記載)

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-9th-4{margin:30px auto}.iframe-wrapper-9th-4{width:92%}.videoimage-wrapper-9th-4{position:relative;z-index:2;width:43%;margin:-33% 0 0 auto;pointer-events:none}.videoimage-9th-4{width:100%;filter:drop-shadow(10px 10px 6px hsla(0,0%,35%,.5))}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)

.all-wrapper-9th-4 {
  margin: 30px auto;
}

.iframe-wrapper-9th-4 {
  width: 92%;
}

.videoimage-wrapper-9th-4 {
  position: relative;
  z-index: 2;
  width: 43%;
  margin: -33% 0 0 auto;
  pointer-events: none;
}

.videoimage-9th-4 {
  width: 100%;
  filter: drop-shadow(10px 10px 6px hsla(0,0%,35%,.5));
}

【素材DL】

画像 (400×365)

バフォメット

【html】
注) 画像アドレスを入れる箇所あり (画像a 1箇所)

<div class="all-wrapper-9th-5" style="max-width: 500px;"><!-- max-widthは全体幅指定 -->
  <div class="videoimage-wrapper-9th-5">
    <img class="videoimage-9th-5" src="画像aURL" alt="">
  </div>
  <div class="iframe-wrapper-9th-5">
    <div class="box-for-video with-border">
      埋め込みコード
    </div>
  </div>
</div>

埋め込みコードをvideo embedに変更する方は box-for-videoクラスを持つ要素へwith-borderクラスの追加を忘れないようにしてください。

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
注) 画像bはメッセージボードと共通素材です。

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-9th-5{margin:30px auto}.videoimage-wrapper-9th-5{position:relative;z-index:2;width:47%;margin:auto;pointer-events:none}.videoimage-9th-5{width:100%;filter:drop-shadow(0 5px 6px hsla(0,0%,35%,.5))}.iframe-wrapper-9th-5{position:relative;margin-top:-14%;padding:4%;box-shadow:0 4px 6px 2px hsla(0,0%,35%,.5);border:2px ridge rgb(50,50,50);background:url(https://file.blog.fc2.com/vanillaice000/material/sozai-9-5b.gif)}.with-border{border:4px ridge rgb(50,50,50)}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
注) 画像bはメッセージボードと共通素材です。

.all-wrapper-9th-5 {
  margin: 30px auto;
}

.videoimage-wrapper-9th-5 {
  position: relative;
  z-index: 2;
  width: 47%;
  margin: auto;
  pointer-events: none;
}

.videoimage-9th-5 {
  width: 100%;
  filter: drop-shadow(0 5px 6px hsla(0,0%,35%,.5));
}

.iframe-wrapper-9th-5 {
  position: relative;
  margin-top: -14%;
  padding: 4%;
  box-shadow:0px 4px 6px 2px hsla(0,0%,35%,.5);
  border: 2px ridge rgb(50,50,50);
  background: url(画像bURL);
}

.with-border {
  border: 4px ridge rgb(50,50,50);
}

【素材DL】

画像a (560×405)
画像b (100×100)

お揃いのメッセージボードはコチラ

メッセージボード その9

お遊びシリーズは Playground のタグにまとめています。...

過去のYouTube装飾はコチラ

The other way round

コピペで使えるYouTube装飾集。…

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ