youtubeのサムネイルは希望の大きさで表示できたのですが、再生すると 小さく表示されてしまいます。サムネイルと同じ大きさで再生したいです。
質問お願します。
webページにyoutube動画を多数投稿したいので 読み込み速度を速めるために iframe ではなく、サムネイルをまず読み込むとよいという記事をみたので 試しているところです。
(参考にしたページhttps://web-memo.jp/youtube-speedoptimization/)
サムネイルを表示するところまでは できました。 しかし動画を再生するとサムネイルよりも小さく表示されます。横幅はwidthはwhtで調整可能なのは確認できました。 高さが調整できません
試してみたこと
auto と height_ 100% も試しましたが効果がありません
親要素に高さと幅をしてしても効果がありませんでした
######height: calc() ですと調整できますが、レスポンシブに対応できるように細かいサイズ設定が必要になってしまうので、他のやり方でサムネイルと同じ大きさで表示する方法をご存じの方がいらっしゃれば 教えて頂けると幸いです。
サムネイルの表示サイズは
枠内に綺麗に収まってます。width 100% margin 3% できれいにはまってくれました。
htmlコード <div class="yt"> <div class="yt_video" youtube="https://www.youtube.com/embed/動画ID?rel=0&showinfo=0&autoplay=1"> <img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="サンプル動画" width="100%" height="auto" /> </div> </div>
cssコード .yt_video{ margin: 3%;} ※サムネイルに指定したのは marginのみです .yt iframe { /* 親要素内100%で動画を表示する */ position: absolute; top: 0; right: 0; width: 100%; height: 100%;} ※参考ページの方法では 動画が枠の外に出て表示されるので position absolute を外してみると 枠内で表示されますが、 サムネイルと同じおおきさでは表示されません
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。