채택완료

유투브 링크시 전체화면이 안보이는 원인....

2014-08-10 (일) 09:42:34 16,257

14f4c7af2d338f152949442d431087c0_1407630832_7683.png
 

그누보드 5 게시판에 유투브영상을 링크하면 이유는 모르겠으나 전체화면 버튼이 안보입니다.

유투브 가로 사이즈, 관리자에서 이미지폭 설정 문제는 아닙니다. ​해결방안을 검색하다 저와같은 분이 한 분계셨는데

그분은 자바스크립트로 youtube iframe에 allowfullscreen="allowfullscreen"​ 을 동적으로 추가해 해결 하셨다고 합니다.

저는 초보라 이해는하나 소스같은것을 적지를 못합니다. 근본적인 원인을 아시는분이나. 

유투브 링크시 iframe에 allowfullscreen="allowfullscreen" 자동으로 걸리게 자바스크립트 만들어 주시면 감사하겠습니다. (__​

|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트
2014-08-10 (일) 12:32:04

그누 신삥이라 근본적인 원인 그런거 모르것고..스킨 하단 비슷한데에다가 추가

근데 allowFullScreen​='allowFullScreen',allowFullScreen​ ,allowFullScreen​=true​ 어느게 맞는건진 잘 모륷어요 ㅋ

 

Copy
$(function() { $('iframe[src*="www.youtube.com"]').attr('allowFullScreen','allowFullScreen​');});

그외 속성을 추가하거나 수정할려믄

Copy
$(function() { $('iframe[src*="www.youtube.com"]').attr({'allowFullScreen': true,'width':300});});
​ 

 좀더 구체적으로 특정 블록에다만 적용할려면(권장)

Copy
$(function() { $('#블록아이디').find('iframe[src*="www.youtube.com"]').attr('allowFullScreen','allowFullScreen​');});​

스크립트를 html요소 하단에 넣는다면​ ​$(function() {... }); 요건 빼도 상관없을듯​

 

참고로 유튜브영상에 속성을추가하고 반응형으로 와이드 16:9 까지 만들실려면 이렇게 하시면 됩니다.​

스타일속성 추가한다음

<style>

.video-container {

    position:relative;

    padding-bottom:56.25%;

    height:0;

    overflow:hidden;

}

.video-container iframe, .video-container object, .video-container embed {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

}

</style> 

하나로 합쳐서

Copy
$(function() { $('#bo_v_con').find('iframe[src*="www.youtube.com"]').attr('allowFullScreen','allowFullScreen​').wrap('<div class="video-container"></div>');});​

답변에 대한 댓글 1개

친절한 답변 감사드립니다. 한번에 해결했습니다 !

답변을 작성하려면 로그인이 필요합니다.