YouTubeを飾ってみる その2

投稿 2018年12月03日
2
カスタマイズ
InstructionYouTubeHTMLCSS初心者向け

YouTubeお飾り第二弾。割とお使いになる方がいらっしゃるようなので良い素材があればこうして追加していこうかな (´・ω・`)
今回からはCSSをJSで取り込むようなソース内容にしたいと思いますので利用の注意点をよくお読みくださいね。

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

JSソースコード(CSS内容が含まれています) は 追記 の方へ記載し、本文への掲載は避けるようにしてください。
記す位置は追記の最終をおすすめします。

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

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

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

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

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

埋め込みコード取得

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

YouTubeを飾ってみる

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

素材のダウンロード

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

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

YouTube装飾いろいろ

htmlは本文・追記どちらでも記載できます。スタイリングについては、使用頻度が高い場合には CSS雛形 の方をスタイルシート末尾に追加します。
使用頻度の低い場合には スタイル用JS追記 に記載してください。「CSS雛形」「スタイル用JS」両方ではなくいずれかを選択してください。

素材によっては動画が若干左右に寄った状態になります。そうしないと装飾が画面を超過しますのでこの点をご了承ください。
全体幅はhtmlのstyle属性max-width値で調整してください。画面横いっぱいを使い切る場合には style="max-width: 数値px;" を直前にある半角スペースも含め削除します。

鳥とリボン

html
本文・追記どちらでも記載可

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

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-2nd{display:flex;margin:0 auto 30px}.right-iframe-wrapper{position:relative;width:85%;margin:5% 0 0 -25%}.videoimage-wrapper-2nd{position:relative;z-index:3;width:40%;pointer-events:none}.video-image-wrapper::before{content:"";display:block;padding-top:calc(403 / 300 * 100%)}.videoimage-bird{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-2nd {
  display: flex;
  width: 100%;
  margin: 0 auto 30px;/* 30pxが後続要素との距離 */
}

.right-iframe-wrapper {
  position: relative;
  width: 85%;
  margin: 5% 0 0 -25%;
}

.videoimage-wrapper-2nd {
  position: relative;
  z-index: 3;
  width: 40%;
  pointer-events: none;
}

.video-image-wrapper::before {
  content: "";
  display: block;
  padding-top: calc(403 / 300 * 100%);
}

.videoimage-bird {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

素材DL (実寸: 300×403)

結晶とグラス

html
本文・追記どちらでも記載可

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

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-2nd-2{width:100%;max-width:500px;margin:auto}.videoimage-wrapper-2nd-2{position:relative;width:100%;margin-bottom:calc(56.25% - calc(453 / 570 * 50%) + 30px)}.videoimage-wrapper-2nd-2::before{content:"";display:block;padding-top:calc(453 / 570 * 100%)}.videoimage-jingle{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}.bottom-iframe-wrapper{position:absolute;top:50%;left:0;z-index:1;width:100%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-2nd-2 {
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

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

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

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

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

素材DL (実寸: 570×453)

隠れる分量が多いので動画を選ぶ装飾かもしれません。苦になる方は .videoimage-jingleopacity: .8; を追加してみるなどの工夫をしてください(不透明度は各々調整のこと)

雪だるま

html
本文・追記どちらでも記載可

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

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-2nd-3{display:flex;align-items:flex-end;width:100%;margin:0 auto 30px}.left-iframe-wrapper{width:80%;margin-right:-20%}.videoimage-wrapper-2nd-3{position:relative;z-index:3;width:40%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-2nd-3 {
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin: 0 auto 30px;/* 30pxが後続要素との距離 */
}

.left-iframe-wrapper {
  width: 80%;
  margin-right: -20%;
}

.videoimage-wrapper-2nd-3 {
  position: relative;
  z-index: 3;
  width: 40%;
  pointer-events: none;
}

素材DL (実寸: 400×332)

枯れ葉

html
本文・追記どちらでも記載可

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

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-2nd-4{margin:0 auto 30px}.videoimage-wrapper-2nd-4{position:relative;z-index:3;margin-top:calc(168 / 476 * -45%);pointer-events:none}.videoimage-autumn{width:100%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-2nd-4 {
  margin: 0 auto 30px;/* 30pxが後続要素との距離 */
}

.videoimage-wrapper-2nd-4 {
  position: relative;
  z-index: 3;
  margin-top: calc(168 / 476 * -45%);
  pointer-events: none;
}

.videoimage-autumn {
  width: 100%;
}

素材DL (実寸: 476×168)

チューリップ

html
本文・追記どちらでも記載可

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

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-2nd-5{display:flex;align-items:flex-end;width:100%;margin:0 auto 30px}.videoimage-wrapper-2nd-5{position:relative;z-index:3;width:40%;pointer-events:none}.videoimage-tulip{width:100%}.right-iframe-wrapper-2{width:90%;margin-left:-30%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.all-wrapper-2nd-5 {
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin: 0 auto 30px;/* 30pxが後続要素との距離 */
}

.videoimage-wrapper-2nd-5 {
  position: relative;
  z-index: 3;
  width: 40%;
  pointer-events: none;
}

.videoimage-tulip {
  width: 100%;
}

.right-iframe-wrapper-2 {
  width: 90%;
  margin-left: -30%;
}

素材DL (実寸: 308×500)

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

2 COMMENTS

There are no comments yet.

みみこぉ☆^  

先日は、本当にありがとうございました。
今回の素材も素敵ですね。
また使わせていただきます。
実は前回の素材なのですが
追記に記載では上手くできたのに
スタイルシートに記載すると、やはり素材と動画が別々に表示されてしまいました。
今回の素材でスタイルシートに記載で再チャレンジしてみます。

2018/12/05 (Wed) 00:22
vanillaice (Akira)

Akira  

To みみこぉ☆^さん

こんばんは ('0')/

推測でしかありませんが、スタイルシートに記す際には

<style>
.xxx {
内容
}
</style>

赤字の部位は削除してくださいね。これはhtmlタグなのでCSSに含めることはできません。
今回のソースは初めからstyleタグを外してありますのでそのままコピペでOKです。
よろしくお願いします :)

2018/12/05 (Wed) 01:32

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)