メディアの埋め込みを控えめにするUserCSS

code:style.css

/* ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.iframe-video-player iframe, /* 通常の埋め込み */

.video-player video, /* Gyazoの動画の埋め込み */

.gyazo.landscape iframe {

height: auto;

aspect-ratio: 16 / 9;

width: 85%;

}

}

.iframe-video-player:hover .control { /* ボタンの表示がずれてしまうので消しておく */

display: none;

}

動画プレイヤー内の要素には干渉できない？

サムネイルがいい感じにならないのを解決したい

個別に適用しないようにしたければ、上書きする

UserCSSの概念自体が上書きか

code:html

<div class="iframe-video-player">

<div class="control">

<span class="kamon kamon-arrow-up-rect"></span>

</div>

</iframe>

</div>

移動したメディアエリアは上に重ねられていく

各要素を指定したいときのために調査しておく

動画メディア

code:css

.iframe-video-player iframe { /* 通常の埋め込み */

display: inline-block;

margin: 3px 0;

vertical-align: middle;

width: 99%;

height: 480px;

max-height: 40vw;

border: 0

}

.video-player video { /* Gyazoの動画の埋め込み */

display: inline-block;

max-width: 99%;

max-height: 600px;

vertical-align: middle;

cursor: pointer

}

.gyazo.landscape iframe {

width: 99%

}

音楽メディア

code:css

.iframe-video-player iframe.spotify {

max-height: unset

}

.iframe-video-player iframe.spotify.type-track {

height: 80px

}

.iframe-video-player iframe.spotify.type-artist,

.iframe-video-player iframe.spotify.type-playlist,

.iframe-video-player iframe.spotify.type-album {

height: 370px

}

.iframe-video-player iframe.spotify.type-episode,

.iframe-video-player iframe.spotify.type-show {

height: 232px

}

画像メディア

code:css

.line .image {

margin: 3px 0;

max-width: 100%;

max-height: 300px;

display: inline-block;

vertical-align: bottom;

}

.line .strong-image { /* [[]]で囲って大きくする記法 */

margin: 3px 0;

max-width: 95%;

max-height: none;

display: inline-block;

vertical-align: bottom;

}

.line:not(.cursor-line).image-line-2 .image,

.line:not(.cursor-line).image-line-2 .strong-image { /* 複数並べた場合 */

max-width: 49.5%;

}

.line:not(.cursor-line).image-line-3 .image,

.line:not(.cursor-line).image-line-3 .strong-image {

max-width: 33%

}

.line:not(.cursor-line).image-line-4 .image,

.line:not(.cursor-line).image-line-4 .strong-image { /* 4つ並べた場合までしか定義されていない */

max-width: 24.75%

}