MNekoeのゆるい日常

取り止めのない日常日記

本ページはアフィリエイトプログラムによる広告を利用しています

はてブ)Youtube貼り付け時のサイズも調整する

先日画像サイズを調整するのはやってみたけど

m-nekoe-life.hatenablog.com

 

これだとYoutubeのリンクが若干デカすぎる&ウィンドウサイズが小さかったりするとサムネが見切れてたりするのでそこに対応させるためにこういう感じにしてみようと思う。

 

初回のみ

デザインCSSに以下を追記

.youtubeframe {
position: relative;
padding-bottom: 56.25%; /*Youtube推奨アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}

.youtubeframe iframe {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 90%;
}

 

web版はてブの「追加」メニューの、「定型文貼り付け」に以下を登録。ついでに表示ON設定にしとく。

///

タイトル→Youtube貼り付け用

本文→

<div class="youtubeframe">

 

</div>

////

 

Youtubeのリンクを貼り付けるときは以下の手順とする
  • リンク貼るときはHTML編集モードで↑で登録した定型分「Youtube貼り付け用」を貼り付け
  • タグで囲まれた部分の空行にカーソルをセットしてからはてブの「Youtube貼り付け」メニューより該当動画を貼り付ける
  • 貼り付け時にタグが消えたりすることがあるようなので、動画を貼り付けた時はプレビューで表示が崩れないことを確認する

↓↓※モチベボタン※↓↓

↑↑広告クリックで私のモチベが上がります↑↑