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

**URL:** https://meta.discourse.org/t/how-to-display-a-video-on-the-trendy-login-modal/271381
**Category:** Support
**Tags:** trendy-login
**Created:** [7월 11, 2023, 11:56오전 UTC](https://meta.discourse.org/t/how-to-display-a-video-on-the-trendy-login-modal/271381 "2023-07-11T11:56:20Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![ValGun](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valgun/32/309935_2.png) [@ValGun](https://meta.discourse.org/u/ValGun)
#### Post date: [7월 11, 2023, 11:56오전 UTC](https://meta.discourse.org/t/how-to-display-a-video-on-the-trendy-login-modal/271381/1 "2023-07-11T11:56:20Z")

</div>

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

 ![IMG_2966.PNG](https://global.discourse-cdn.com/meta/original/4X/d/2/e/d2ea8ff0d420aaa5356a9e6a3cd180cbfb6a538a.jpeg)

---

<div class="post-metadata">

### Author: ![ValGun](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valgun/32/309935_2.png) [@ValGun](https://meta.discourse.org/u/ValGun)
#### Post date: [7월 11, 2023, 1:03오후 UTC](https://meta.discourse.org/t/how-to-display-a-video-on-the-trendy-login-modal/271381/2 "2023-07-11T13:03:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [7월 12, 2023, 7:21오전 UTC](https://meta.discourse.org/t/how-to-display-a-video-on-the-trendy-login-modal/271381/3 "2023-07-12T07:21:29Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ValGun](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/valgun/32/309935_2.png) [@ValGun](https://meta.discourse.org/u/ValGun)
#### Post date: [7월 12, 2023, 10:12오전 UTC](https://meta.discourse.org/t/how-to-display-a-video-on-the-trendy-login-modal/271381/4 "2023-07-12T10:12:11Z")

</div>

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

```plaintext
<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 (컴포넌트 안에 붙여넣기), 제 경우:

```plaintext
.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%;
}

```

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