# 5. [CDN] 영상송출

# 👉🏻 클라우드 플레어 동영상 업로드 

> 📌 로그인 하시고 아래링크로 이동 
> 📌 [https://dash.cloudflare.com/
> ](https://dash.cloudflare.com/)📌 아래 사진 따라 (1)Stream → Videos 클릭 
> 📌 가운데 (2) `Drop video here or click to browse` 클릭해서 동영상 업로드

![Image](https://upload.cafenono.com/image/slashpageHome/20240429/003930_JMjzeQS1rXTpmosvn7?q=75&s=1280x180&t=outside&f=webp)

# 👉🏻 동영상 삽입 태그 가져오는 방법 

> 📌  동영상이 업로드되면 아래 사진처럼 리스트에 생성됩니다 
> 📌 `Ready`  상태에서만 태그를 가져올수 있어요 **(Uploading 상태라면 조금만 기다려주세요)**
> 📌 생성된 동영상 제목을 클릭합니다.
> 

![Image](https://upload.cafenono.com/image/slashpageHome/20240429/004114_mgVKHQdAq2tSfOGSVd?q=75&s=1280x180&t=outside&f=webp)

> 📌 아래와 사진 순서대로 (1)Embed 클릭 
> 📌 (2)옵션 입니다 아래 사진처럼 체크해야 PC&모바일 자동재생이 됩니다(controls 체크빼주세요..)
>  * controls : 재생,정지 컨트롤 박스 **(체크 안하는게  더이뻐요)**
>  * autoplay : 자동재생
>  * loop : 무한재생
>  * muted : 음소거 **(음소거를 안하면 자동재생이 안됩니다)
> **📌 (3) 복사 버튼입니다. 복사를 해주세요
> 

![Image](https://upload.cafenono.com/image/slashpageHome/20240429/004244_t0996lp6GJIxJss5YU?q=75&s=1280x180&t=outside&f=webp)

# 👉🏻 PC 상품에 동영상 업로드

> 📌 백합 백색 4인 세트 (22p) 를 샘플로 수정했어요
> 📌 카페24 상품 수정에서 내리다보면 상품상세설명에 (1)클릭해 **코드형태**로 변경해주세요
> 📌 그리고 위에서 복사 했던 코드에 PC버전에선 사이즈를 맞추기위해 조금 수정해야해요 
> **📌 line 1**에 div 부분만 아래처럼 수정 해주시면 됩니다 
> ( PC버전에 맞게 width와 padding을 수정하고, 가운데 정렬을 했습니다) 
> 📌 그리고 img 태그 중간부분 동영상 넣을 부분에 넣어주시면 완료됩니다!
> 

```
<div style="position: relative; padding-top: 36.55%; width: 800px; text-align: center; margin: 0px 220px;">
```

![Image](https://upload.cafenono.com/image/slashpageHome/20240429/005231_5nUEMRsDkgjIntvOqX?q=75&s=1280x180&t=outside&f=webp)

# 👉🏻 모바일 상품에 동영상 업로드 

> 📌 위에 PC버전에 맞게 리사이징 해서 `상품상세설명 동일` 하게 하면 모바일에서 화면이 작아지는 이슈가 있어요 
> 📌 그래서 모바일버전은 `직접 등록` 해서 PC버전과 별도로 수정해주셔야합니다
> 📌 클라우드플레어에서 복사한 iframe 태그를 **수정없이 그대로 붙여넣기**하면 이쁘게 보여집니다(원하는 위치에요)
> 

![Image](https://upload.cafenono.com/image/slashpageHome/20240429/005212_oq1u3MsVY5vOmnVOlP?q=75&s=1280x180&t=outside&f=webp)

[https://slashpage.com/ekwangjuyo/7916x82rqqdgnm4kpyg3](https://slashpage.com/ekwangjuyo/7916x82rqqdgnm4kpyg3)

For the site tree, see the [root Markdown](https://slashpage.com/ekwangjuyo.md).