YouTubeを飾ってみる その3

YouTubeを飾ってみる その3

カスタマイズ
2019/02/27 4
vanillaice (Akira)
vanillaice (Akira)
Instruction YouTube HTML CSS 初心者向け Playground

YouTubeお飾り第三弾。
素材を保存しているPhotobucketサービスの劣化が甚だしく。ちょっと早急に整理の必要が生じましたのでここで使う(笑)

これまでのお約束と同じですが、画像の直リンク厳禁 です。たぶんPhotobucketの削除や移動作業の絡みでミスると思うので念を押しておきます ←
私がポカるとみなさんの画像も消えてしまいますのでご自身で管理なさってくださいね。

独自クラス .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だけを取得すること。

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

YouTube装飾いろいろ

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

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

赤いリボン

html

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

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-3rd{display:flex;align-items:flex-start;margin:30px auto}.iframe-redribbon-3rd{width:calc(100% - 4%);margin-left:4%}.videoimage-redribbon-3rd{position:relative;z-index:3;width:20%;margin-right:-20%;pointer-events:none}.videoimage-redribbon-3rd img{width:100%}.iframe-redribbon-3rd{margin-top:10px}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

.all-wrapper-3rd {
  display: flex;
  align-items: flex-start;
  margin: 30px auto;
}

.iframe-redribbon-3rd {
  width: calc(100% - 4%);
  margin-left: 4%;
}

.videoimage-redribbon-3rd {
  position: relative;
  z-index: 3;
  width: 20%;
  margin-right: -20%;
  pointer-events: none;
}

.videoimage-redribbon-3rd img {
  width: 100%;
}

.iframe-redribbon-3rd {
  margin-top: 10px;
}

素材DL (実寸: 120×410)

アニメーションGIF枠

html

<div class="all-wrappe-angle-3rd" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
  <div class="box-for-video">
    ここに埋め込みコード
  </div>
</div>

スタイル用JS (注: 画像URL記載箇所あり)

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrappe-angle-3rd{margin:30px auto;padding:20px;background:url(画像URL) center center /30px auto black}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載 (注: 画像URL記載箇所あり)

.all-wrappe-angle-3rd {
  margin: 30px auto;
  padding: 20px;
  background: url(画像URL) center center /30px auto black;/* black背景色変更可 */
}

素材DL (実寸: 570×453)

ピンクローズ

html

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

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.videoimage-pinkrose-3rd{position:relative;padding-top:calc(238 / 661 * 100%);margin-top:-20%;pointer-events:none}.videoimage-pinkrose-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形

.all-wrapper-block-3rd {
  margin: 30px auto;
}

.videoimage-pinkrose-3rd {
  position: relative;
  padding-top: calc(238 / 661 * 100%);
  margin-top: -20%;
  pointer-events: none;
}

.videoimage-pinkrose-3rd img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

素材DL (実寸: 661×238)

梅(梅じゃないかもしんない)

html

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

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.videoimage-umebls-3rd{position:relative;width:60%;margin-top:-18%;margin-left:auto;pointer-events:none}.videoimage-umebls-3rd::before{content:"";display:block;padding-top:calc(242 / 543 * 100%)}.videoimage-umebls-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形

.all-wrapper-block-3rd {
  margin:30px auto;
}
.videoimage-umebls-3rd {
  position: relative;
  width: 60%;
  margin-top: -18%;
  margin-left: auto;
  pointer-events: none;
}

.videoimage-umebls-3rd::before {
  content: "";
  display: block;
  padding-top: calc(242 / 543 * 100%);
}

.videoimage-umebls-3rd img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

素材DL (実寸: 543×242)

青い花

html

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

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.videoimage-blueflower-3rd{position:relative;z-index:3;margin-bottom:-32%;padding-top: calc(339 / 570 * 100%);pointer-events:none}.videoimage-blueflower-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形

.all-wrapper-block-3rd {
  margin: 30px auto;
}

.videoimage-blueflower-3rd {
  position: relative;
  z-index: 3;
  margin-bottom: -32%;
  padding-top: calc(339 / 570 * 100%);
  pointer-events: none
}

.videoimage-blueflower-3rd img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

素材DL (実寸: 570×339)

朱と白の花

html

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

スタイル用JS

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.for-redflower{width:97%!important;margin-right:3%}.videoimage-redflower-3rd{position:relative;width:46%;margin-top:-33%;margin-left:auto;pointer-events:none}.videoimage-redflower-3rd::before{content:"";display:block;padding-top:calc(382 / 500 * 100%)}.videoimage-redflower-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形

.all-wrapper-block-3rd {
  margin: 30px auto;
}

.for-redflower {
  width: 97% !important;
  margin-right: 3%;
}

.videoimage-redflower-3rd {
  position: relative;
  width: 46%;
  margin-top: -33%;
  margin-left: auto;
  pointer-events: none;
}

.videoimage-redflower-3rd::before {
  content: "";
  display: block;
  padding-top: calc(382 / 500 * 100%);
}

.videoimage-redflower-3rd img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

素材DL (実寸: 500×382)

過去のYouTube装飾はコチラ

YouTubeを飾ってみる

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

YouTubeを飾ってみる その2

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

 4

There are no comments yet.
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/03/04 (Mon) 14:12
vanillaice (Akira)
Akira
To ブログパーツの件 内緒さん

こんばんは。

サイトの方拝見しました。これは要するに「そちらのプラグインを組み込んだテンプレートを製作する」という解釈で合ってますでしょうか。アイデアとしてはとても良いと思いますし、製作自体はやぶさかでないのですが今ここでYES, NOはお答えできません。
私が製作したものはFC2の審査を通過させる必要がありますのでお約束できないのと、実際に組み込んでみた際の表示速度なども考慮する必要がありますので、まず私自身が試してから、ということになりますよね。

なにせ完全無償の作業ですから早急なお返事が必要な場合はお断りさせてください。
時間を頂いても良いのであれば共有プラグインが公開された時点で製作作業を試してみたいと思います。
よろしくお願いします。

2019/03/04 (Mon) 20:53
webdeco
To Akiraさん

早々のお返事ありがとうございます。

> これは要するに「そちらのプラグインを組み込んだテンプレートを製作する」という解釈で合ってますでしょうか。
はい。そのとおりでございます。

決して急がせるつもりはございませんので、Akira様のご都合次第、気分次第で結構ですので、前向きなご検討をお願いいたします。

ちなみに、弊サイトのブログパーツコードを空(カラ)のHTMLにでも記述して、サーバーにアップせずとも動作いたしますので、お時間があれば、適当にお試しいただければと思います。

この度は、突然のお願いにも関わらず、ご対応いただき、感謝申し上げます。

2019/03/04 (Mon) 21:11
vanillaice (Akira)
Akira
To webdecoさん

ご丁寧にありがとうございます。

はい。時間を見てやってみますね。なるべく早いうちに。
連絡は貴殿の「お問い合わせ」欄で良いでしょうか。別のフォームが有ればこちらへご返信をお願いします。
無ければどうぞ返信ご無用で。

2019/03/04 (Mon) 21:24

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

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

カスタマイズ