レスポンシブ対応のテンプレートを採用したが、
動画がはみ出したままだった。

下記のサイトを参考に修正しました。
参考サイト:あなたのブログの動画はスマートフォンではみ出してるかもしれない

[手順]
1.iframe を div で囲む
2.css に下記を追加

.xxx {
position: relative;
width: 100%;
}

.xxx::before {
content:"";
display: block;
padding-top: 56.25%;
}

.xxx iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


3.記事内の動画を下記の形式で記述する
<div class="xxx" style="max-width: 動画最大横幅px">
<iframe width="560" height="315" src="動画アドレス" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

当ブログは、まだ記事数も少なく、動画を盛り込んだ記事も
5件程度でしたので、簡単に修正出来ました。
【スポンサーリンク】

CM一覧 ( 0件)

まだコメントはありません。

CM投稿

NAME
TITLE
WEBSITE
COMMENT
PASSWORD
SECRET