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

Question

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

<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>	

/*ここから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にしてみたのですが、

.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の位置が固定されてしまい、一緒に拡大縮小されない点について解決希望です

<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>	

Comments

[Lhankor_Mhy]

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

[21120903ryosuke]

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

[21120903ryosuke]

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

Answer 1

こんばんは。

こういうことでしょうか？

    .pc_bana {
        /*display: block;*/
        display: flow-root;
        line-height: 0;
        position: relative; /* 追加 */
        padding-left: 50%; /* 追加 */
    }

    .pc_bana img {
        width: 100%;
        height: auto;
        position: absolute; /* 追加 */
        z-index: -1; /* 追加 */
        left: 0; /* 追加 */
    }