今回はお揃いのメッセージボードもあります。
独自クラス .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だけを取得すること。
それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。
今回はメッセージボードとお揃いですので、セットで利用する場合は同じ画像を二度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)
過去のYouTube装飾はコチラ YouTubeを飾ってみる 今回は完全に遊びです。
YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・｀)... YouTubeを飾ってみる その2 YouTubeお飾り第二弾。割とお使いになる方がいらっしゃるようなので良い素材があればこうして追加していこうかな (´・ω・｀)
今回からはCSSをJSで取り込むようなソース内容にしたいと思いますので利用の注意点をよくお読みくださいね。... YouTubeを飾ってみる その3 YouTubeお飾り第三弾。
素材を保存しているPhotobucketサービスの劣化が甚だしく。ちょっと早急に整理の必要が生じましたのでここで使う(笑)
これまでのお約束と同じですが、画像の直リンク厳禁 です。たぶんPhotobucketの削除や移動作業の絡みでミスると思うので念を押しておきます ←
私がポカるとみなさんの画像も消えてしまいますのでご自身で管理なさってくださいね。...
vanillaice000.blog.fc2.com
vanillaice000.blog.fc2.com
vanillaice000.blog.fc2.com
There are no comments yet.