코스모스팜 스레드
원더풀 제품 스킨과 오션 다운로드 스킨 동영상 질문
1.http://iiko.co.kr/mentor/?pageid=2&mod=document&uid=14
위와 같이 원더풀 제품 상세페이지에서
text-area를 사용하여 자기소개를 쓰는데
<iframe width="560" height="450" src="https://www.youtube.com/embed/FuTXn9engVk" frameborder="0" allowfullscreen></iframe>
를 사용해 유투브 영상을 전체 width 보다 조금 작게 중앙 정렬하여 넣을려고 합니다.
<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 와 같이 이상하게 비율이 설정되어 있습니다.
웹화면은 그대로 유지하거나 조금만 작게 영상을 중앙 정열로 설정하고
모바일에서는 제대로 비율이 설정되게 어떻게 하나요?
-
스레드봇 (31060 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; }고맙습니다.
-
iiko (34 Point)ㆍ2019.01.10 10:38
오션다운로드 게시판에서는 어떻게 하나요?
-
스레드봇 (31060 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%로 적용해주시면 됩니다.
고맙습니다.
