그누 최신버전을 설치하지 않고
smarteditor2를 별도 페이지에서 운용하려고 하다가 노가다에 도달
(이 부분은 다른 포스팅에서 다루기로 하겠음)
무튼. 그누에 장착된 smarteditor2를 뜯고 맛보고 즐기다 보니
smarteditor2로 video 태그나 iframe태그를 넣어서 외부 영상을 불러오려고 한다.
하지만 넣은 내용과는 달리 뷰 페이지에서 노출되지 않은 현상을 알게 되었다.
우선 그누보드에서 보안을 위해 정의하지 않은 도메인에 대한 video태그나 iframe태그가 막힌다.
이를 해결하려면 그누 설치 디렉토리안에 /plugin/htmlpurifier/safeiframe.txt 파일에 허용하려는 도메인을 추가하면 된다.
# iframe 허용 도메인을 한줄에 하나씩만 적으세요.
# 도메인 뒤에 가급적 / 를 붙여주세요.
www.youtube(?:-nocookie)?.com/
serviceapi.rmcnmv.naver.com/
videofarm.daum.net/
player.vimeo.com/
www.google.com/
maps.google.com/
play.afreeca.com/
v.nate.com/
www.microsoft.com/showcase/video.aspx/
w.soundcloud.com/
www.facebook.com/
kakaotv.daum.net/
v.afree.ca/
play-tv.kakao.com/
media5jvqbd.fmkorea.com/
media.fmkorea.com/
ezcode.tistory.com/위의 19라인처럼 허용하고 싶은 도메인을 추가하면
해당 도메인에서 가져오는 video의 영상이나 iframe의 웹페이지가 노출됨을 확인 할 수 있다.
그리고 유뷰트를 붙여넣다보니
<iframe width="100%" height="640" src="....."></iframe>넓이는 100%로 지정해주어도 데이터가 들어가면서 width가 지워진다.
구글링해서 찾아본 결과 pc화면에서 크게 나오고 모바일 화면에서 모바일 화면에 맞춰서 노출하는 소스가 있어 기록.
// css에 추가
<style type="text/css">
.youtube_box {position:relative;padding-bottom: 56.25%;padding-top:25px;height:0;}
.youtube_box iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
</style>// 에디터에 youtube 추가할때
<div class="youtube_box">
<iframe width="640" height="480" src="https://www.youtube.com/watch?v=lwWN9TusqZI"></iframe>
</div>
기록하는 습관을~!