YouTubeを飾ってみる その6

YouTubeを飾ってみる その6

カスタマイズ 遊び
2019/04/26
0
vanillaice (Akira)
vanillaice (Akira)
InstructionYouTubeHTMLCSS初心者向けPlayground

お揃いのメッセージボードもあります。ボードの方の装飾がイカツイのでこちらは控えめにしておきました。

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

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

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

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

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

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

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

vanillaice000.blog.fc2.com

埋め込みコード取得

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

YouTubeを飾ってみる

YouTubeを飾ってみる

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

vanillaice000.blog.fc2.com

素材のダウンロード

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

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

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

YouTube装飾いろいろ

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

白薔薇背景

【html】
注)埋め込みコード記載箇所あり 

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

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 2箇所, 画像b 1箇所, 計3箇所) 

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-6th-1{margin:30px auto;padding:2px;background:url(画像bURL) content-box,url(画像aURL) padding-box}.iframe-wrapper-6th-1{margin:4%;padding:2px;background:url(画像aURL)}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 2箇所, 画像b 1箇所, 計3箇所) 

.all-wrapper-6th-1 {
  margin: 30px auto;
  padding: 2px;
  background: url(画像bURL) content-box,
              url(画像aURL) padding-box;
}

.iframe-wrapper-6th-1 {
  margin: 4%;
  padding: 2px;
  background: url(画像aURL);
}

素材DL

画像a (100×100)
画像b (400×481)

黒枠赤背景

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

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

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-6th-2{display:flex;flex-direction:column;margin:30px auto}.videoimage-wrapper-6th-2{position:relative;z-index:2;width:100%;pointer-events:none}.videoimage-6th-2{width:100%}.iframe-wrapper-6th-2{margin-top:-25%;border:5px ridge rgb(51,51,51)}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

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

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

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

.iframe-wrapper-6th-2 {
  margin-top: -25%;
  border: 5px ridge rgb(51,51,51);
}

素材DL

画像c (481×220)

青い花背景

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

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

【スタイル用JS】(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所) 

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-6th-3{display:flex;flex-direction:column;align-items:center;margin:30px auto}.videoimage-wrapper-6th-3{position:relative;z-index:2;width:70%;pointer-events:none}.videoimage-6th-3{width:100%}.iframe-wrapper-6th-3{padding:4%;width:100%;margin-top:-12%;border:2px solid rgb(218,199,159);background:url(画像aURL) center center /150px auto}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

【CSS雛形】(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所) 

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

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

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

.iframe-wrapper-6th-3 {
  padding: 4%;
  width: 100%;
  margin-top: -12%;
  border: 2px solid rgb(218,199,159);
  background: url(画像aURL) center center /150px auto;
}

素材DL

画像a (500×445)
画像d (445×136)

金枠と紫の花

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

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

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

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

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

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

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

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

.iframe-wrapper-6th-4 {
  width: 100%;
  margin-top: -30%;
}

素材DL

画像c (500×379)

黒枠赤リボン

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

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

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

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-6th-5{display:flex;flex-direction:column;align-items:center;margin:30px auto}.videoimage-wrapper-6th-5{position:relative;z-index:2;width:80%;pointer-events:none}.videoimage-6th-5{width:100%;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.6))}.iframe-wrapper-6th-5{width:100%;margin-top:-13%;padding:3px;background:radial-gradient(circle closest-side,rgb(240,179,114),rgb(240,179,114) 50%,rgb(61,61,61) 50%,rgb(61,61,61)) 0 0 /6px 6px}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

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

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

.videoimage-wrapper-6th-5 {
  position: relative;
  z-index: 2;
  width: 80%;
  pointer-events: none;
}

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

.iframe-wrapper-6th-5 {
  width: 100%;
  margin-top: -13%;
  padding: 3px;
  background: radial-gradient(circle closest-side, rgb(240,179,114), rgb(240,179,114) 50%, rgb(61,61,61) 50%, rgb(61,61,61)) 0 0 /6px 6px;
}

素材DL

画像b (500×124)

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

メッセージボード その6

メッセージボード その6

YouTubeとお揃いの装飾ボードです。...

vanillaice000.blog.fc2.com

過去のYouTube装飾はコチラ

YouTubeを飾ってみる

YouTubeを飾ってみる

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

vanillaice000.blog.fc2.com
YouTubeを飾ってみる その2

YouTubeを飾ってみる その2

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

vanillaice000.blog.fc2.com
YouTubeを飾ってみる その3

YouTubeを飾ってみる その3

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

vanillaice000.blog.fc2.com
YouTubeを飾ってみる その4

YouTubeを飾ってみる その4

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

vanillaice000.blog.fc2.com
YouTubeを飾ってみる その5

YouTubeを飾ってみる その5

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

vanillaice000.blog.fc2.com
Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
    FC2共有テンプレート一覧 ご質問の前に
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)
「遊び」 カテゴリの一覧を見る