코스모스팜 스레드

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

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 와 같이 이상하게 비율이 설정되어 있습니다.

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

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

 

무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
  • 안녕하세요~^^

    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%로 적용해주시면 됩니다.

    고맙습니다.

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

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

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

    #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; }

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)