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

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

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

受付中

画像imgの上に動画iframeと文字pを配置したい

21120903ryosuke
21120903ryosuke

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

1回答

0評価

0クリップ

3閲覧

投稿2021/02/17 06:48

編集2022/01/12 10:55

添付画像のように配置すべく
イメージ説明
以下のように記述してみたのですが、画像の上に文字と動画が回り込みません。
添付画像のようにするための記述ミス等ございましたらご指摘、ご教授いただけますと幸いです。
よろしくお願いします。※ちなみに動画は(スマホ比率)縦型で設置予定です。

html

<div class="pc_bana"> <img src="img/new_pc_top_2.jpg" alt="メイン画像pc"> <h1> <div class="eizou_pc"><p>映像から見る美しさ</p></div> </h1> <div class="youtube_pc"> <iframe width="100%" height="800" src="https://www.youtube.com/test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> </div>

css

/*ここからPC(769px以上)環境の設定*/ @media(min-width:769px){ .youtube_smp iframe{ display: none; } .eizou_smp{ display:none; } .youtube_pc iframe{ display: block; text-align:center; } .eizou_pc{ display: block; text-align:center; position: relative; } .eizou_pc p{ color:#F19EC2; padding:10px; font-weight:bold; font-size:1.5em; position: absolute; top: 0; left: 0; } .pc_bana{ display:block; line-height: 0; } .pc_bana img{ width:100%; height:auto; } }

backgroundにしてみたのですが、

css

.pc_bana{ display:block; line-height: 0; background:url("../img/new_pc_top_2.jpg")no-repeat; background-size: contain; }

当サイトレスポンシブサイトですが、ウインドウの拡大縮小の際、
new_pc_top_2.jpgの拡大縮小にあわせて、iframeも拡大縮小をされるようにしたいのですが、iframeの位置が固定されてしまい、一緒に拡大縮小されない点について解決希望です

html

<div class="youtube_pc"> <iframe width="auto" height="500" src="https://www.youtube.com/embed/test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><!-- kodawari_1/ --> </div>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy
Lhankor_Mhy

2021/02/17 06:57

背景画像にすればスッキリしそうな気がするのですが、すでにご検討されましたか?
21120903ryosuke
21120903ryosuke

2021/02/17 07:23

背景画像にしたとき、上にくるpやiframeはウインドウを拡大縮小したときに位置を固定にしたいのですが方法がわからないです、、現状、背景画像にした場合のsizeはcontainにしています。
21120903ryosuke
21120903ryosuke

2021/02/17 08:35

画像を更新しました。見せたいimgが無限模様のような背景ではなく、人が映ってる画像のため、人の上にiframeが被らないようにしたいのですが、backgroundで指定すると、被ってしまう状況です

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。