今回は完全に遊びです。
YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・｀)
--- 追記 2019.4.17 ---
html内容を一部変更しました。
--- 追記 2018.12.7 ---
CSS内容の一部を修正しました。style要素でのCSSを削除しJSでのCSS適用を追加しました。
--- 追記 ここまで ---
独自クラス .box-for-video がテンプレートCSSに含まれていることを前提としています。
また、旧投稿画面をご利用の方は「改行の扱い」を「HTMLのみ」に設定してください。
この装飾を利用した動画を「本文」の最初に掲載した場合、サムネイル対象画像(OGP含む)が動画にくっついている装飾画像になります。それを避けたい場合には動画掲載よりも先に意図的に別の画像を指定するか、「アイキャッチ画像」の機能を利用してください。
レスポンシブに加えLazysizesのvedeo embedを利用可能にするため若干複雑なコード内容になっています。vedeo embedで埋め込む場合は「埋め込みコード」のiframe要素を含むbox-for-videoクラスのついたdiv要素をlazysizes vedeo embedのdiv要素に変更してください。また、装飾用画像もimgなのでlazyloadingにできます。
レスポンシブ動画のための独自クラスが必要です。全てのテンプレートに含めているわけではないので事前に確認してください。含まれない場合は以下の記事を参照、追加してくださいね。
あなたのブログの動画はスマートフォンではみ出してるかもしれない
めちゃくちゃ多いんですよ。スマートフォンで動画がはみ出している 方。 今もう モバイル最優先 という時代ですが、ブログなどの記事はパソコンで書いているという方もまだ多いと思います。 スマホで長文ってキッツいですよねぇ (´・ω・｀) パソコンで書いているとやっぱりパソコンの見た目に集中してしまいます。 スマホはパソコンと比べたらめっちゃ画面小さいんやで！ というのを忘れてしまう。 というわけで対処...
埋め込みコード取得
ご存知だろうとは思いますが一応説明。
「埋め込む」をクリックすると、
iframe要素でhtmlコードが出てきますのでそれをコピー。これからご紹介するソースコード内にある「埋め込みコード」はこのiframe要素を指します。
素材のダウンロード
装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。
それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。
YouTube装飾いろいろ
htmlは本文・追記どちらでも記載できます。スタイリングについては、使用頻度が高い場合には CSS雛形 の方をスタイルシート末尾に追加します。使用頻度の低い場合には スタイル用JS を 記事編集画面、使用する動画装飾htmlの直下 に記載してください。「CSS雛形」「スタイル用JS」両方ではなくいずれかを選択してください。
素材によっては動画が若干左右に寄った状態になります。そうしないと装飾が画面を超過しますのでこの点をご了承ください。全体幅はhtmlのstyle属性max-width値で調整してください。画面横いっぱいを使い切る場合には style="max-width: 数値px;" を直前にある半角スペースも含め削除します。
YouTube装飾いろいろ
バラのつぼみ
ソースコードを見る
html
<div class="all-wrapper-1st-1" style="max-width: 600px;"><!-- max-widthは最大横幅指定 -->
<div class="videoimage-wrapper-1st-1">
<img class="videoimage-1st-1" src="画像URL" alt="">
</div>
<div class="iframe-wrapper-1th-1">
<div class="box-for-video">
ここに埋め込みコード
</div>
</div>
</div>スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-1{display:flex;flex-direction:column;margin:auto}.videoimage-wrapper-1st-1{position:relative;z-index:2;width:100%;pointer-events:none}.videoimage-1st-1{width:100%}.iframe-wrapper-1th-1{position:relative;z-index:1;width:100%;margin-top:-18%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
CSS雛形
スタイルシートに記載
.all-wrapper-1st-1 {
display: flex;
flex-direction: column;
margin: auto;
}
.videoimage-wrapper-1st-1 {
position: relative;
z-index: 2;
width: 100%;
pointer-events: none;
}
.videoimage-1st-1 {
width: 100%;
}
.iframe-wrapper-1th-1 {
position: relative;
z-index: 1;
width: 100%;
margin-top: -18%;
}
素材DL (実寸: 570×203)
金枠
ソースコードを見る
html
<div class="all-wrapper-1st-2" style="max-width: 600px;">
<img class="videoimage-1st-2-1" src="画像URL" alt="">
<img class="videoimage-1st-2-2" src="画像URL" alt="">
<img class="videoimage-1st-2-3" src="画像URL" alt="">
<img class="videoimage-1st-2-4" src="画像URL" alt="">
<div class="box-for-video width-adjust">
埋め込みコード
</div>
</div>
スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-2{position:relative;margin:30px auto}.width-adjust iframe{z-index:1}.videoimage-1st-2-1{position:absolute;top:0;left:0;z-index:2;width:70px;height:70px;pointer-events:none}.videoimage-1st-2-2{position:absolute;top:0;right:0;z-index:2;width:70px;height:70px;transform:scale(-1,1);pointer-events:none}.videoimage-1st-2-3{position:absolute;bottom:0;left:0;z-index:2;width:70px;height:70px;transform:scale(1,-1);pointer-events:none}.videoimage-1st-2-4{position:absolute;bottom:0;right:0;z-index:2;width:70px;height:70px;transform:scale(-1,-1);pointer-events:none}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
CSS雛形
スタイルシートに記載
.all-wrapper-1st-2 {
position: relative;
margin: 30px auto;
}
.width-adjust iframe {
z-index: 1;
}
.videoimage-1st-2-1 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 70px;
height: 70px;
pointer-events: none;
}
.videoimage-1st-2-2 {
position: absolute;
top: 0;
right: 0;
z-index: 2;
width: 70px;
height: 70px;
transform: scale(-1, 1);
pointer-events: none;
}
.videoimage-1st-2-3 {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 70px;
height: 70px;
transform: scale(1, -1);
pointer-events: none;
}
.videoimage-1st-2-4 {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
width: 70px;
height: 70px;
transform: scale(-1, -1);
pointer-events: none;
}
素材DL (実寸: 150×150)
鳥かごとはさみ
ソースコードを見る
html
<div class="all-wrapper-1st-3" style="max-width: 600px;">
<div class="videoimage-wrapper-1st-3">
<img class="videoimage-1st-3" src="画像URL" alt="">
</div>
<div class="iframe-wrapper-1st-3">
<div class="box-for-video">
埋め込みコード
</div>
</div>
</div>
スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-3{display:flex;flex-direction:column;margin:30px auto}.videoimage-wrapper-1st-3{position:relative;z-index:2;width:100%;pointer-events:none}.videoimage-1st-3{position:relative;z-index:1;width:100%}.iframe-wrapper-1st-3{width:100%;margin-top:-22%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
CSS雛形
スタイルシートに記載
.all-wrapper-1st-3 {
display: flex;
flex-direction: column;
margin: 30px auto;
}
.videoimage-wrapper-1st-3 {
position: relative;
z-index: 2;
width: 100%;
pointer-events: none;
}
.videoimage-1st-3 {
position: relative;
z-index: 1;
width: 100%;
}
.iframe-wrapper-1st-3 {
width: 100%;
margin-top: -22%;
}
素材DL (実寸: 500×280)
ハートにピン
ソースコードを見る
html
<div class="all-wrapper-1st-4" style="max-width: 600px;">
<div class="videoimage-wrapper-1st-4">
<img class="videoimage-1st-4" src="画像URL" alt="">
</div>
<div class="iframe-wrapper-1st-4">
<div class="box-for-video">
埋め込みコード
</div>
</div>
</div>
スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-4{display:flex;flex-direction:column;align-items:center;margin:30px auto}.videoimage-wrapper-1st-4{position:relative;z-index:2;width:11%;pointer-events:none}.videoimage-1st-4{width:100%}.iframe-wrapper-1st-4{position:relative;z-index:1;width:100%;margin-top:-8%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
CSS雛形
スタイルシートに記載
.all-wrapper-1st-4 {
display: flex;
flex-direction: column;
align-items: center;
margin: 30px auto;
}
.videoimage-wrapper-1st-4 {
position: relative;
z-index: 2;
width: 11%;
pointer-events: none;
}
.videoimage-1st-4 {
width: 100%;
}
.iframe-wrapper-1st-4 {
position: relative;
z-index: 1;
width: 100%;
margin-top: -8%;
}
素材DL (実寸: 67×107)
毛糸のハート
ソースコードを見る
html
<div class="all-wrapper-1st-5" style="max-width: 600px;">
<div class="videoimage-wrapper-1st-5">
<img class="videoimage-1st-5" src="画像URL" alt="">
</div>
<div class="iframe-wrapper-1st-5">
<div class="box-for-video">
埋め込みコード
</div>
</div>
</div>
スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.all-wrapper-1st-5{display:flex;flex-direction:column;align-items:center;margin:30px auto}.videoimage-wrapper-1st-5{position:relative;z-index:2;width:80%;pointer-events:none}.videoimage-1st-5{width:100%}.iframe-wrapper-1st-5{position:relative;z-index:1;width:100%;margin-top:-21%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
CSS雛形
スタイルシートに記載
.all-wrapper-1st-5 {
display: flex;
flex-direction: column;
align-items: center;
margin: 30px auto;
}
.videoimage-wrapper-1st-5 {
position: relative;
z-index: 2;
width: 80%;
pointer-events: none;
}
.videoimage-1st-5 {
width: 100%;
}
.iframe-wrapper-1st-5 {
position: relative;
z-index: 1;
width: 100%;
margin-top: -21%;
}
素材DL (実寸: 570×320)
ご無沙汰しております
YouTubeを飾ってみる！
いいですね！ 最近忙しくて、ブログの更新もままならないのですが、
是非使ってみたいです。
以前に教えてもらった装飾枠もいいですけどねえ((o(｡･ω･｡)o))ｳｷｳｷ