質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1058閲覧

サムネイルを埋め込んだyoutube動画を再生すると 表示がちいさくなってしまいます

yukiko-yukiko

総合スコア11

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/12 22:17

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 を外してみると 枠内で表示されますが、 サムネイルと同じおおきさでは表示されません

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

webページ内でyoutube動画を再生させたかったのですが、きれいに表示されないことから、このやり方を諦めて youtubeリンクに直接飛ぶようにしました。
質問を読んでくださった方、ありがとうございました。

投稿2021/04/13 13:59

yukiko-yukiko

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問