YouTubeAPI、iframeのCSSについて

Question

YouTubeAPIにてiframeを用いて動画を表示する事に成功しております。
またヘッダーとフッターと重なる時もヘッダー、フッターのしたにYouTube動画が表示されており期待通りの動きなのですがヘッダー、フッターのAタグをクリックすると後ろにあるはずのYoutube動画が再生されてしまいます。

解決方法わかる方いましたら宜しくお願い致します。

Comments

[Lhankor_Mhy]

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[Rikuto7]

ご連絡ありがとうがざいます。
iframeのスタイルはデフォルトになっております。

<div className="movieView">
<iframe title="ytmovie"
id="ytplayer"
type="ytplayer"
width="480"
height="270"
src={url}
frameBorder="0"
key={movie.etag}
/>
</div>

<footer className='fadeLeft'>
<div>
<Link to="/">
<AiFillHome />
</Link>
</div>
<div>
<Link to="/search">
<FaImages />
</Link>
</div>
<div className='footerRight'>
<Link to="/movies">
<ImYoutube />
</Link>
</div>
<div className='footerRight'>
<Link to="/article/create/">
<BsPlusCircleFill />
</Link>
</div>
</footer>

footer{
width: 100%;
background: linear-gradient(to top left, #6500fc 50%, white 50%);
padding: 20px 0 12px 0;
position: fixed;
top: 749px;
display: flex;
justify-content: space-around;
border-top: solid 0.1px lightgray;
font-size: 25px;
}

[Lhankor_Mhy]

何かのフレームワークを使っていると思いますので、そちらのタグを追加するように質問を編集することをお勧めします。

[Rikuto7]

ご指摘ありがとうございます。
デプロイを行ってみたところ正常に動いた為、デベロッパーツールの使用の関係と認識しております。

[Lhankor_Mhy]

ご解決されて何よりです。

自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself

Answer 1

ブラウザ上の問題でsafariにて表示確認が取れました。