코스모스팜 스레드

원더풀 제품 스킨과 오션 다운로드 스킨 동영상 질문

1.http://iiko.co.kr/mentor/?pageid=2&mod=document&uid=14

위와 같이 원더풀 제품 상세페이지에서

text-area를 사용하여 자기소개를 쓰는데

<p align center> 나 <div style = text-align center> 등을 이용해 보았지만 해결되지 않았습니다.

그리고 모바일 화면에서는 https://imgur.com/a/PJbokgS 와 같이 비율이 이상하게 나오는것도 해결하고 싶습니다.

2. http://iiko.co.kr/manual/?uid=44&mod=document&pageid=1

위의 링크와 같이 오션다운로드 스킨에서도 유튜브 영상을 넣었지만

모바일 화면에서는 https://imgur.com/a/Xzepq3G 와 같이 이상하게 비율이 설정되어 있습니다.

웹화면은 그대로 유지하거나 조금만 작게 영상을 중앙 정열로 설정하고

모바일에서는 제대로 비율이 설정되게 어떻게 하나요?

iiko (34 Point)ㆍ2019.01.10 04:30ㆍ조회 2507ㆍ RSS

추천 0 비추천

스레드봇 (31179 Point)ㆍ2019.01.10 10:19
안녕하세요~^^

KBoard 플러그인에서 본문 내용에 유튜브 아이프레임을 입력했을 때

본문 페이지에서 동영상을 16:9 비율로 표시하고 최대 너비를 조절하는 방법을 안내해드리겠습니다.

KBoard 원더풀 제품소개 스킨을 사용 중이시라면

글쓰기 페이지에서 아래의 코드를 입력해보시겠어요?
```
<div class="kboard-video-container-wrap"><div class="kboard-video-container"><iframe class="kboard-video" width="560" height="450" src="https://www.youtube.com/embed/FuTXn9engVk" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe></div></div>
```
워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가해보세요.
```
#kboard-wonderful-product-document .kboard-content .content-view .kboard-video-container-wrap { margin: 0 auto; max-width: 560px; }
#kboard-wonderful-product-document .kboard-content .content-view .kboard-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: black; }
#kboard-wonderful-product-document .kboard-content .content-view iframe.kboard-video { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; border: 0; }
```
위의 코드에서 max-width: 560px; 부분의 픽셀 값을 수정하시면

PC 화면에서 표시되는 동영상의 최대 너비를 조절하실 수 있습니다.

padding-bottom: 56.25%;는 동영상을 16:9 비율로 표시하는 코드입니다.

4:3 비율로 적용하시려면 75%로 적용해주시면 됩니다.

고맙습니다.
추천 0 비추천

수정하기 삭제
iiko (34 Point)ㆍ2019.01.10 10:38

오션다운로드 게시판에서는 어떻게 하나요?

추천 0 비추천

수정하기 삭제

스레드봇 (31179 Point)ㆍ2019.01.10 11:35

오션 다운로드 스킨에서 적용하시려면

아래의 코드로 교체해보시겠어요?

#kboard-ocean-download-document .kboard-content .content-view .kboard-video-container-wrap { margin: 0 auto; max-width: 560px; }
#kboard-ocean-download-document .kboard-content .content-view .kboard-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: black; }
#kboard-ocean-download-document .kboard-content .content-view iframe.kboard-video { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; border: 0; }

스킨에 상관없이 적용하시려면

아래의 코드로 적용해보세요.

.kboard-content .content-view .kboard-video-container-wrap { margin: 0 auto; max-width: 560px; }
.kboard-content .content-view .kboard-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: black; }
.kboard-content .content-view iframe.kboard-video { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; border: 0; }

고맙습니다.

코스모스팜 스레드

원더풀 제품 스킨과 오션 다운로드 스킨 동영상 질문

스토어인기제품 더보기

커뮤니티새로운 글 더보기