유투브 링크시 전체화면이 안보이는 원인....
본문
그누보드 5 게시판에 유투브영상을 링크하면 이유는 모르겠으나 전체화면 버튼이 안보입니다.
유투브 가로 사이즈, 관리자에서 이미지폭 설정 문제는 아닙니다. 해결방안을 검색하다 저와같은 분이 한 분계셨는데
그분은 자바스크립트로 youtube iframe에 allowfullscreen="allowfullscreen" 을 동적으로 추가해 해결 하셨다고 합니다.
저는 초보라 이해는하나 소스같은것을 적지를 못합니다. 근본적인 원인을 아시는분이나.
유투브 링크시 iframe에 allowfullscreen="allowfullscreen" 자동으로 걸리게 자바스크립트 만들어 주시면 감사하겠습니다. (__
답변 1
그누 신삥이라 근본적인 원인 그런거 모르것고..스킨 하단 비슷한데에다가 추가
근데 allowFullScreen='allowFullScreen',allowFullScreen ,allowFullScreen=true 어느게 맞는건진 잘 모륷어요 ㅋ
$(function() { $('iframe[src*="www.youtube.com"]').attr('allowFullScreen','allowFullScreen');});
그외 속성을 추가하거나 수정할려믄
$(function() { $('iframe[src*="www.youtube.com"]').attr({'allowFullScreen': true,'width':300});});
좀더 구체적으로 특정 블록에다만 적용할려면(권장)
$(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>
하나로 합쳐서
$(function() { $('#bo_v_con').find('iframe[src*="www.youtube.com"]').attr('allowFullScreen','allowFullScreen').wrap('<div class="video-container"></div>');});
친절한 답변 감사드립니다. 한번에 해결했습니다 !