YouTubeお飾り第三弾。
素材を保存しているPhotobucketサービスの劣化が甚だしく。ちょっと早急に整理の必要が生じましたのでここで使う(笑)
これまでのお約束と同じですが、画像の直リンク厳禁 です。たぶんPhotobucketの削除や移動作業の絡みでミスると思うので念を押しておきます ←
私がポカるとみなさんの画像も消えてしまいますのでご自身で管理なさってくださいね。
独自クラス .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-3rd" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
<div class="videoimage-redribbon-3rd">
<img src="画像URL" alt="">
</div>
<div class="iframe-redribbon-3rd">
<div class="box-for-video">
ここに埋め込みコード
</div>
</div>
</div>スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-3rd{display:flex;align-items:flex-start;margin:30px auto}.iframe-redribbon-3rd{width:calc(100% - 4%);margin-left:4%}.videoimage-redribbon-3rd{position:relative;z-index:3;width:20%;margin-right:-20%;pointer-events:none}.videoimage-redribbon-3rd img{width:100%}.iframe-redribbon-3rd{margin-top:10px}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
CSS雛形
スタイルシートに記載
.all-wrapper-3rd {
display: flex;
align-items: flex-start;
margin: 30px auto;
}
.iframe-redribbon-3rd {
width: calc(100% - 4%);
margin-left: 4%;
}
.videoimage-redribbon-3rd {
position: relative;
z-index: 3;
width: 20%;
margin-right: -20%;
pointer-events: none;
}
.videoimage-redribbon-3rd img {
width: 100%;
}
.iframe-redribbon-3rd {
margin-top: 10px;
}
素材DL (実寸: 120×410)
アニメーションGIF枠
ソースコードを見る
html
<div class="all-wrappe-angle-3rd" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
<div class="box-for-video">
ここに埋め込みコード
</div>
</div>スタイル用JS (注: 画像URL記載箇所あり)
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrappe-angle-3rd{margin:30px auto;padding:20px;background:url(画像URL) center center /30px auto black}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>
CSS雛形
スタイルシートに記載 (注: 画像URL記載箇所あり)
.all-wrappe-angle-3rd {
margin: 30px auto;
padding: 20px;
background: url(画像URL) center center /30px auto black;/* black背景色変更可 */
}
素材DL (実寸: 570×453)
ピンクローズ
ソースコードを見る
html
<div class="all-wrapper-block-3rd" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
<div class="box-for-video">
ここに埋め込みコード
</div>
<div class="videoimage-pinkrose-3rd">
<img src="画像URL" alt="">
</div>
</div>スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.videoimage-pinkrose-3rd{position:relative;padding-top:calc(238 / 661 * 100%);margin-top:-20%;pointer-events:none}.videoimage-pinkrose-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>CSS雛形
.all-wrapper-block-3rd {
margin: 30px auto;
}
.videoimage-pinkrose-3rd {
position: relative;
padding-top: calc(238 / 661 * 100%);
margin-top: -20%;
pointer-events: none;
}
.videoimage-pinkrose-3rd img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
素材DL (実寸: 661×238)
梅(梅じゃないかもしんない)
ソースコードを見る
html
<div class="all-wrapper-block-3rd" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
<div class="box-for-video">
ここに埋め込みコード
</div>
<div class="videoimage-umebls-3rd">
<img src="画像URL" alt="">
</div>
</div>スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.videoimage-umebls-3rd{position:relative;width:60%;margin-top:-18%;margin-left:auto;pointer-events:none}.videoimage-umebls-3rd::before{content:"";display:block;padding-top:calc(242 / 543 * 100%)}.videoimage-umebls-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>CSS雛形
.all-wrapper-block-3rd {
margin:30px auto;
}
.videoimage-umebls-3rd {
position: relative;
width: 60%;
margin-top: -18%;
margin-left: auto;
pointer-events: none;
}
.videoimage-umebls-3rd::before {
content: "";
display: block;
padding-top: calc(242 / 543 * 100%);
}
.videoimage-umebls-3rd img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
素材DL (実寸: 543×242)
青い花
ソースコードを見る
html
<div class="all-wrapper-block-3rd" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
<div class="videoimage-blueflower-3rd">
<img src="画像URL" alt="">
</div>
<div class="box-for-video">
ここに埋め込みコード
</div>
</div>スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.videoimage-blueflower-3rd{position:relative;z-index:3;margin-bottom:-32%;padding-top: calc(339 / 570 * 100%);pointer-events:none}.videoimage-blueflower-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>CSS雛形
.all-wrapper-block-3rd {
margin: 30px auto;
}
.videoimage-blueflower-3rd {
position: relative;
z-index: 3;
margin-bottom: -32%;
padding-top: calc(339 / 570 * 100%);
pointer-events: none
}
.videoimage-blueflower-3rd img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
素材DL (実寸: 570×339)
朱と白の花
ソースコードを見る
html
<div class="all-wrapper-block-3rd" style="max-width: 600px;"><!-- max-widthは全体幅指定 -->
<div class="box-for-video for-redflower">
ここに埋め込みコード
</div>
<div class="videoimage-redflower-3rd">
<img src="画像URL" alt="">
</div>
</div>スタイル用JS
<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.all-wrapper-block-3rd{margin:30px auto}.for-redflower{width:97%!important;margin-right:3%}.videoimage-redflower-3rd{position:relative;width:46%;margin-top:-33%;margin-left:auto;pointer-events:none}.videoimage-redflower-3rd::before{content:"";display:block;padding-top:calc(382 / 500 * 100%)}.videoimage-redflower-3rd img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>CSS雛形
.all-wrapper-block-3rd {
margin: 30px auto;
}
.for-redflower {
width: 97% !important;
margin-right: 3%;
}
.videoimage-redflower-3rd {
position: relative;
width: 46%;
margin-top: -33%;
margin-left: auto;
pointer-events: none;
}
.videoimage-redflower-3rd::before {
content: "";
display: block;
padding-top: calc(382 / 500 * 100%);
}
.videoimage-redflower-3rd img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
素材DL (実寸: 500×382)
過去のYouTube装飾はコチラ YouTubeを飾ってみる 今回は完全に遊びです。
YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・｀)... YouTubeを飾ってみる その2 YouTubeお飾り第二弾。割とお使いになる方がいらっしゃるようなので良い素材があればこうして追加していこうかな (´・ω・｀)
今回からはCSSをJSで取り込むようなソース内容にしたいと思いますので利用の注意点をよくお読みくださいね。...
vanillaice000.blog.fc2.com
vanillaice000.blog.fc2.com
There are no comments yet.