注目のログインモーダルに動画を表示する方法は？

サポート
1

@meghna このコンポーネントをありがとうございます！
デスクトップでは期待どおりに動作しますが、
iPhone XR（少なくとも）のモバイル（Chrome、Edgeブラウザ）では、動画（YouTubeチャンネル）が表示されません。
これを修正する方法について何か考えはありますか？
ありがとうございます！
追伸：スクリーンショットのログインボタンの上にある空白は、動画が表示されるはずの場所です…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

「いいね！」 1
2

YouTubeから動画を埋め込むことで解決しました。HTMLを少し変更しました。
CSSを追加することで、モバイルでも動画が表示されるようになりました。

「いいね！」 2
3

ハックをここで共有してもらえますか？

「いいね！」 2
4

@tobiaseigen かしこまりました！
私の場合はコンポーネント内のHTML（YouTubeリンクの「EMBED」に注意してください）：

<p>StarCohortに限定参加し、UAのEuroTiger Pathをグローバル🌍同期で歩み、次にスケールアップしましょう。</p>
<p class="center-aligned-element">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QKLAKLp7bDw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

CSS（コンポーネント内に貼り付け）、私の場合は：

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    padding-top: 30px; /* コンテンツのオーバーレイを避けるための上部のパディング */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

誰かの役に立つことを願っています)

「いいね！」 3