YouTubeお飾り第二弾。割とお使いになる方がいらっしゃるようなので良い素材があればこうして追加していこうかな (´・ω・｀)
今回からはCSSをJSで取り込むようなソース内容にしたいと思いますので利用の注意点をよくお読みくださいね。
独自クラス .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などの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・｀)...
vanillaice000.blog.fc2.com
素材のダウンロード
装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。
それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。
YouTube装飾いろいろ
htmlは本文・追記どちらでも記載できます。スタイリングについては、使用頻度が高い場合には CSS雛形 の方をスタイルシート末尾に追加します。
使用頻度の低い場合には スタイル用JS を 記事編集画面、使用する動画装飾htmlの直下 に記載してください。「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-jingle に opacity: .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)
There are no comments yet.