attention admin about comments trackbacks you may also like

YouTubeを飾ってみる その4

2019年03月14日
カスタマイズ
17
Instruction YouTube HTML CSS 初心者向け Playground

今回はお揃いのメッセージボードもあります。

独自クラス .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】
注)画像アドレスと埋め込みコード記載箇所あり

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

【スタイル用JS】

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

【CSS雛形】

.all-wrapper-4th-1 {
  display: flex;
  align-items: flex-end;
  margin: 30px auto;
}

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

.videoimage-wrapper-4th-1 {
  position: relative;
  z-index: 3;
  width: 40%;
  margin-right: -30%;
  pointer-events: none;
}

.iframe-wrapper-4th-1 {
  position: relative;
  z-index: 2;
  width: 100%;
}

素材DL (実寸: 570×573)

黒背景白い小花

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

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

【スタイル用JS】

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

【CSS雛形】

.all-wrapper-4th-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 30px auto;
}

.videoimage-wrapper-4th-2 {
  position: relative;
  z-index: 3;
  width: 60%;
  pointer-events: none;
}

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

.iframe-wrapper-4th-2 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -30%;
}

素材DL (実寸: 550×358)

野花

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

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

【スタイル用JS】

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-4th-3{display:flex;flex-direction:column;margin:30px auto}.iframe-wrapper-4th-3{position:relative;z-index:2;width:100%}.videoimage-wrapper-4th-3{position:relative;z-index:3;width:80%;margin-top:-38%;pointer-events:none}.videoimage-4th-3{opacity:.7;width:100%;transform:scale(-1,1)}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】

.all-wrapper-4th-3 {
  display: flex;
  flex-direction: column;
  margin: 30px auto;
}

.iframe-wrapper-4th-3 {
  position: relative;
  z-index: 2;
  width: 100%;
}

.videoimage-wrapper-4th-3 {
  position: relative;
  z-index: 3;
  width: 80%;
  margin-top: -38%;
  pointer-events: none;
}

.videoimage-4th-3 {
  opacity: .7;
  width: 100%;
  transform: scale(-1,1);
}

素材DL (実寸: 550×320)

桃色桜

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

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

【スタイル用JS】

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-4th-4{display:flex;flex-direction:column;align-items:flex-start;margin:30px auto}.iframe-wrapper-4th-4{position:relative;z-index:2;width:100%}.videoimage-wrapper-4th-4{position:relative;z-index:3;width:80%;margin-top:-8%;pointer-events:none}.videoimage-4th-4{width:100%;transform:scale(-1,1)}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】

.all-wrapper-4th-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30px auto;
}

.iframe-wrapper-4th-4 {
  position: relative;
  z-index: 2;
  width: 100%;
}

.videoimage-wrapper-4th-4 {
  position: relative;
  z-index: 3;
  width: 80%;
  margin-top: -8%;
  pointer-events: none;
}

.videoimage-4th-4 {
  width: 100%;
  transform: scale(-1,1);
}

素材DL (実寸: 570×129)

藍の花

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

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

【スタイル用JS】

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

【CSS雛形】

.all-wrapper-4th-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px auto;
}

.iframe-wrapper-4th-5 {
  position: relative;
  z-index: 2;
  width: 100%;
}

.videoimage-wrapper-4th-5 {
  position: relative;
  z-index: 3;
  width: 30%;
  margin-top: -12%;
  pointer-events: none;
}

.videoimage-4th-5 {
  width: 100%;
}

素材DL (実寸: 345×332)

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

春っぽいお花背景のメッセージボード

「CSSで遊ぼう」のコーナーです。 … そんなのあったんかい (´・ェ・`) お遊びシリーズは Playground のタグにまとめています。今回はお花背景のシンプルなメッセージボードです。YouTube装飾とお揃いにしましたのでそちらもどうぞ。...

過去のYouTube装飾はコチラ

YouTubeを飾ってみる

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

YouTubeを飾ってみる その2

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

YouTubeを飾ってみる その3

YouTubeお飾り第三弾。 素材を保存しているPhotobucketサービスの劣化が甚だしく。ちょっと早急に整理の必要が生じましたのでここで使う(笑) これまでのお約束と同じですが、画像の直リンク厳禁 です。たぶんPhotobucketの削除や移動作業の絡みでミスると思うので念を押しておきます ← 私がポカるとみなさんの画像も消えてしまいますのでご自身で管理なさってくださいね。...

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(17)

There are no comments yet.

あトん

2019/03/22 (Fri) 13:34

YouTube装飾のコードの利用について

Akira先生、いつもこっそり拝見し勉強させて頂いてます。
今回ご相談があり、29ヵ月ぶりに書き込ませていただきます。
YouTube装飾のコードですが、はてなブログでも使ってみたいのですが、お許しを頂けないでしょうか。
(テスト環境で動くことは確認済です。)

Akira

2019/03/22 (Fri) 16:22
vanillaice (Akira)

To あトんさん

こんにちは。

はい。表示に問題が無ければどのサービスでご利用頂いても構いません。
ご丁寧にありがとうございます :)

あトん

2019/03/22 (Fri) 17:04

To Akiraさん

Akira先生、コード利用の許可ありがとうございます!

これから頑張って組込みたいと思います。

完成したら、こっそりお知らせします。

Akira

2019/03/22 (Fri) 20:58
vanillaice (Akira)

To あトんさん

はい。ご自由にお使いくださいね :)

あトん

2019/03/25 (Mon) 01:32

To Akiraさん

はてなブログで装飾して見たものの、全く同じようにはできませんでした。(汗)

スマホでは崩れてしまいました。(涙)

Akira

2019/03/25 (Mon) 01:49
vanillaice (Akira)

To あトんさん

こんばんは。

今ざっと拝見しましたが、崩れたのはツベのせいではないですよ。全ページで崩れています。
(コンテンツのビューポート超過)
たぶんどこかにabsolute指定があるのではないかと。
コンタクトレンズを外してしまったのでまた明日時間があれば確認しますね。
よろしくお願いします。

あトん

2019/03/25 (Mon) 06:02

Akira先生、おはようございます。
お手数をおかけして申し訳ありません。
サチコにコンテンツの幅が画面の幅を超えています、とエラーを指摘されてますのでどこかおかしいとは思ってました。
見て頂くのはお暇な時で結構です。
自己責任で利用してますので、ヒントだけも頂けると助かります。

Akira

2019/03/25 (Mon) 14:45
vanillaice (Akira)

To あトんさん

こんにちは。

細かくは説明しませんが、ヘッダー部の画像はアニメーションで拡大しますよね。これ拡大する度にどんどん幅が広がってます。指定領域内でスケーリングするよう修正が必要です。

参考テンプレート
https://vanillaice000.blog.fc2.com/blog-entry-777.html

あとbox-for-videoとyoutubeクラスが干渉しています。あトんさんの独自クラスyoutbeを持つdiv要素は削除してください。その上でbox-for-videoのスタイリングを移植してください。
あとすんごく重たい ^^;

よろしくお願いします。

あトん

2019/03/25 (Mon) 23:08

お忙しい中、Akira先生ご指摘とヒントありがとうございました。

Bron-Broenの#list-slider参考にさせて頂きます。

2つとも直さないと、と分かっていた部分ですが、はっきり言って頂き感謝いたします。

まあ、いいか、と時間が出来たら直そうと思っていたのですが、
誰にも言われないと自発的にはなかなか直しずらいです。

自力で何とかしたいと思います。(デザインテーマ自体を0から見直すかも知れません)

重たいのは画像ですね。100KB以下にはしてますが、もっと軽量化しないとダメですね。
(はてなはFC2に比べ、全体的に非常に重たいです。)

それでは。

Akira

2019/03/25 (Mon) 23:48
vanillaice (Akira)

To あトんさん

はい。頑張ってください。
あと、「先生」などと呼んで頂くほど優れた者ではありませんので、どうぞお気遣いなく(笑)

また気軽にお声掛けくださいね :)

あトん

2019/04/08 (Mon) 01:27

To Akiraさん

Akira様、頑張ってご指摘の部分を修正したのですが、結局YouTubeはまだ上手く動いておりません。

なお、FC2ブログでは問題なく再生できてます。
https://100pv.blog.fc2.com/blog-entry-159.html

しかし、はてなブログでは、PCでは「…で接続が拒否されました。」となり、スマホではエラー表示はなく再生できませんでした。
https://www.heavy-peat.com/entry/2019/04/07/234205

もう夜も遅いので寝まーす。

あトん

2019/04/08 (Mon) 01:32

To Akiraさん

あっ、言い忘れましたが、元記事はHTML編集モードでHTMLを埋め込むと、なぜが<p>・<p>に変換されて
コードが勝手に消えてしまう行があり、元記事の修正は諦めました。

今回は新規でHTMLで記事を起こしてます。

Akira

2019/04/08 (Mon) 14:18
vanillaice (Akira)

To あトんさん

こんにちは (o'ω')ノ

「元記事」というのがどれのことなのか私ではわかりませんので、とりあえずURLを頂いているはてなのページが「新規でHTMLで記事を起こして」いるもの、という解釈で良いんでしょうか。

ツベが動かないのは本記事内容とは何の関係もないですよ。はてなブログサーバーとlazysizes video embed JSの相互関係です。
本ページにあるhtml, CSSを一切使わず純粋にvideo embedだけでツベを掲載して確認してみてください。

はてなのテンプレート内に多数の構文エラーがありますのでそれが影響している可能性も否定はしません(検証していません、というかはてな持ってないからできない ^^;)
JSエラーもちょっと許容できない位ありますね (´・ェ・`)
JSエラーがあるとページがすごく重たくなりますのでまずはそちらを綺麗にした方が良いような気がします。
実際どう考えてもスクロールの挙動がおかしいですし。最優先事項はこちらではないかと。

video embedに話を戻します。
レスポンスヘッダのX-Frame-Optionsの設定がsameoriginあるいはdenyになっているとクロスドメインのiframeの取得ができません。
一度ご確認ください。

あと一番最後で良いので、落ち着きましたら以下の記事を参照しvideo embed JSの書き換えをおすすめします。
参考記事: Lazysizesのvideo embedをお使いの方へ修正提案
https://vanillaice000.blog.fc2.com/blog-entry-837.html

----- 追記
19日前にlazysizesのアップデートがあったようです。内容を確認してみますね。場合によっては上記修正提案は不要かもしれません。
また結果をお知らせします。

----- 追記
修正入ってなかったー (´・ェ・`)

あトん

2019/04/08 (Mon) 23:09

To Akiraさん

Akira様、こんばんは。

お忙しい中、サイトを見て頂きありがとうございます。

カスタマイズを一切行ってない別サイトで、LazysizesとYouTube装飾用のcssのみを追加して確認したら、無事動きました。
https://hateb.hateblo.jp/entry/2019/04/08/210008

どこがダメだったか確認したら.box-for-videoを参照するjsが残っていて干渉してました。

これを削除したら、本サイトも動きました。
https://www.heavy-peat.com/entry/2019/04/07/234205

また、最後にvideo embed JSの書き換え版に入れ変えました。
クリックでYouTubeの再生がスタートできるようになりました!

JSエラーはちょっと許容できない位あるとのことですが、今までまったく気にしてませんでした。(汗)

これからはデベロッパーツールのConsoleで確認するようにしたいと思います。

Akira様に相談して本当に良かったです。ありがとうございました!

Akira

2019/04/08 (Mon) 23:38
vanillaice (Akira)

To あトんさん

動いたということで安心しました。

htmlの構文エラーは以下の記事を参考に。
参考記事: ブログ作成に役立つブックマークレット
https://vanillaice000.blog.fc2.com/blog-entry-781.html

W3C validationの章です。
お疲れ様です :)

あトん

2019/04/09 (Tue) 00:08

To Akiraさん

W3C validationのチェック承知しました。
試しにやってみたら、たくさんErrorが出てきて一瞬頭が真っ白になりました。
直せるところは、少しづつ修正したいと思います。

それではお休みなさい。

Akira

2019/04/09 (Tue) 16:32
vanillaice (Akira)

To あトんさん

はい。頑張ってくださいね :)

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

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