비매오, 유투브 ID를 이용한 게시판이 블랙화면으로 보입니다.

동영상 게시판에서 비매오, 유투브 ID로만 동영상을 재생하려고 합니다.

이틀전까지만 해도 재생이 잘 되었는데, 

사파리를 제외한 크롬, 익스플로러에서는 지금 블랙화면으로 뜹니다. 썸네일은 정상적으로 뜹니다.

http://www.olivechurch.or.kr/%EC%98%AC%EB%A6%AC%EB%B8%8C%EB%B0%A9%EC%86%A1/%EB%8B%B4%EC%9E%84%EB%AA%A9%EC%82%AC-%EC%84%A4%EA%B5%90

어떻게 해결해야 하나요?

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 사이트 확인해봤습니다.

    동영상이 안뜨는게 아니라 스타일 변경으로 동영상 크기가 0이 되어서 보이지 않고 있습니다.

    스킨의 style.css 파일을 수정하셨나봅니다.

    http://www.olivechurch.or.kr/wp-content/plugins/kboard/skin/play-video/style.css

     

    .kboard-play-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: black; }
    .kboard-play-video-container video,
    .kboard-play-video-container iframe,
    .kboard-play-video-container object,
    .kboard-play-video-container embed { position: relative; padding-bottom; 56.25%; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; border: 0; }

    위 코드를 찾아서 아래 처럼 다시 변경해주세요.

    .kboard-play-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: black; }
    .kboard-play-video-container video,
    .kboard-play-video-container iframe,
    .kboard-play-video-container object,
    .kboard-play-video-container embed { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; border: 0; }

  • 감사합니다! iframe 전체 높이가 안보이는것 때문에 제가 모르고 수정했었어요;;;;;

  • iframe 허용 도메인을 //content.jwplatform.com 를 추가했습니다.

    그리고, div 포함하여 embed 소스 모두 글내용에 넣었습니다.

    <div style="position:relative; padding-bottom:56.25%; overflow:hidden;"><iframe src="//content.jwplatform.com/players/egmocdrS-fDtwq33d.html" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;"></iframe></div>

    모바일에서는 쇼셜 아이콘과 공백이 있지만, 웹에서는 iframe의 화면도 다 나오지 않고 공백도 있습니다. 

    이거 높이를 실제값으로 주라고 전화상에서는 그렇게 말씀하셨는데, 실제 값으로 주면 grey 로 공백이 또 보여집니다. 

    http://www.olivechurch.or.kr/%EC%98%AC%EB%A6%AC%EB%B8%8C%EB%B0%A9%EC%86%A1/%EC%84%B1%EA%B0%80%EB%8C%80?mod=document&uid=298

    좋은 방법 있을까요?

  • content.jwplatform.com

    이걸 추가해주세요.

    추가하신 // 이건 호스트 도메인과 관련이 없는 문자로 입력하시면 인식하지 않습니다.

    그리고 아래처럼 해보시겠어요?

    <iframe src="http://content.jwplatform.com/players/egmocdrS-fDtwq33d.html" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;">

    또는

    <iframe src="https://content.jwplatform.com/players/egmocdrS-fDtwq33d.html" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;">

     

    높이는 실제값을 입력해주시거나,

    반응형으로 적용하기 위해서는 어쩌면 당연하지만 CSS 또는 스크립트로 비교적 난이도 있는 작업을 하셔야 합니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기