유투브 링크시 전체화면이 안보이는 원인.... 채택완료
그누보드 5 게시판에 유투브영상을 링크하면 이유는 모르겠으나 전체화면 버튼이 안보입니다.
유투브 가로 사이즈, 관리자에서 이미지폭 설정 문제는 아닙니다. 해결방안을 검색하다 저와같은 분이 한 분계셨는데
그분은 자바스크립트로 youtube iframe에 allowfullscreen="allowfullscreen" 을 동적으로 추가해 해결 하셨다고 합니다.
저는 초보라 이해는하나 소스같은것을 적지를 못합니다. 근본적인 원인을 아시는분이나.
유투브 링크시 iframe에 allowfullscreen="allowfullscreen" 자동으로 걸리게 자바스크립트 만들어 주시면 감사하겠습니다. (__
답변 1개
그누 신삥이라 근본적인 원인 그런거 모르것고..스킨 하단 비슷한데에다가 추가
근데 allowFullScreen='allowFullScreen',allowFullScreen ,allowFullScreen=true 어느게 맞는건진 잘 모륷어요 ㅋ
$(function() { $('iframe[src*="</span><a href="<a href="http://www.youtube.com" target="_blank" rel="noopener noreferrer">http://www.youtube.com</a>" style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">www.youtube.com</a><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">"]').attr('allowFullScreen','</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">allowFullScreen</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;"></span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">');});
그외 속성을 추가하거나 수정할려믄
$(function() { $('iframe[src*="<a href="<a href="http://www.youtube.com" target="_blank" rel="noopener noreferrer">http://www.youtube.com</a>">www.youtube.com</a>"]').attr({'allowFullScreen': true,'width':300});});
좀더 구체적으로 특정 블록에다만 적용할려면(권장)
$(function() { $('#블록아이디').find('iframe[src*="</span><a href="<a href="http://www.youtube.com/" target="_blank" rel="noopener noreferrer">http://www.youtube.com/</a>" style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">www.youtube.com</a><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">"]').attr('allowFullScreen','</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">allowFullScreen</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;"></span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">');});</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">
스크립트를 html요소 하단에 넣는다면 $(function() {... }); 요건 빼도 상관없을듯
참고로 유튜브영상에 속성을추가하고 반응형으로 와이드 16:9 까지 만들실려면 이렇게 하시면 됩니다.
스타일속성 추가한다음
하나로 합쳐서
$(function() { $('#bo_v_con').find('iframe[src*="<a href="<a href="http://www.youtube.com" target="_blank" rel="noopener noreferrer">http://www.youtube.com</a>">www.youtube.com</a>"]').attr('allowFullScreen','allowFullScreen').wrap('<div class="video-container"></div>');});</span></font><span style="font-size: 12px; line-height: 18px; font-family: 돋움, Dotum, Helvetica, sans-serif;">
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인