트렌디한 로그인 모달에 영상을 표시하는 방법은?

제품 지원
1

@meghna 이 컴포넌트를 만들어 주셔서 감사합니다!
데스크톱에서는 정상적으로 작동하지만,
아이폰 XR(최소한)에서 모바일(Chrome, Edge 브라우저)로는 비디오(YouTube 채널)가 표시되지 않습니다.
수정 방법에 대해 조언해 주실 수 있을까요?
감사합니다!
P.S. 스크린샷에서 로그인 버튼 위의 빈 공간은 비디오가 있어야 할 자리입니다…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

2

HTML을 약간 수정하여 YouTube 영상을 임베드함으로써 해결했습니다.
CSS를 추가하면 모바일에서도 영상을 표시할 수 있었습니다.

3

여기서 당신의 해킹 팁을 공유해 주시겠어요?

4

@tobiaseigen 물론!
제 경우 컴포넌트 내부의 HTML입니다 (유튜브 링크의 “EMBED” 부분에 주의하세요):

<p>Exclusively join the StarCohort, walking UA`s EuroTiger Path, in global 🌍 sync. Scale next.</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 Aspect Ratio */
    padding-top: 30px; /* Some padding at the top to avoid content overlay */
    height: 0;
    overflow: hidden;
}

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

누군가에게 도움이 되길 바랍니다)