크리에이티브 커먼즈 라이선스(CCL) 표시는 각 게시물의 하단우측에서 확인할 수 있습니다. Creative Commons License(CCL) stamp is at bottom right of each post. RSSEnglish한국어


반응형 스킨에 유튜브 영상 넣기 - DETAIL ver.의 맨 아래에 있는 코드처럼 현재 페이지 내의 유튜브 영상을 다 바꿔주는 스크립트입니다.

<script>
(function(e,p){if(/MSIE [0-7]\.\d+;/.test(navigator.userAgent)){return;}var f=document.getElementsByTagName('IFRAME');var r=new RegExp('^https?:\\/\\/www.youtube.com\\/embed\\/([^?]+)','i');var er=new RegExp('rel=[01]','i');var pr=new RegExp('loop=[01]','i');var pl=new RegExp('playlist=.*[^&]','i');var t='';for(var i=0,l=f.length;i<l;i++){if(parseInt(f[i].getAttribute('width'))>0&&parseInt(f[i].getAttribute('height'))>0&&r.test(f[i].src)){var a=document.createElement('div');a.style.textAlign='center';var b=document.createElement('div');b.style.maxWidth=parseInt(f[i].getAttribute('width'))+'px';b.style.margin='0 auto';var c=document.createElement('div');c.setAttribute('style','position:relative;padding-top:0;height:0;');c.style.paddingBottom=Math.round(parseInt(f[i].getAttribute('height'))/parseInt(f[i].getAttribute('width'))*1E4)/100+'%';f[i].parentNode.insertBefore(a,f[i]);f[i].setAttribute('style','position:absolute;top:0;left:0;width:100%;height:100%;');f[i].removeAttribute('width');f[i].removeAttribute('height');c.appendChild(f[i]);b.appendChild(c);a.appendChild(b);if(f[i].src.indexOf('?')<0&&parseInt(p)==1){f[i].src=f[i].src+'?rel='+e+'&loop='+p+'&playlist='+r.exec(f[i].src)[1];}else if(f[i].src.indexOf('?')<0){f[i].src=f[i].src+'?rel='+e;}else{t=f[i].src;if(er.test(t)){t=t.replace(er,'rel='+e);}else{t=t+'&rel='+e;}if(pr.test(t)){t=t.replace(pr,'loop='+p);}else{t=t+'&loop='+p;}if(!pl.test(t)&&parseInt(p)==1){t=t+'&playlist='+r.exec(f[i].src)[1];}f[i].src=t;}}}}
)(0,1);/* (rel,loop) 0=no 1=yes ver: 0.1 , author: kLiR http://elswordcalc.tistory.com/29 */
</script>

문서 맨 아래의 </BODY> 위에다 삽입하면 됩니다. 마지막 라인의 (0,1)은 유튜브의 rel, loop 파라메터를 일괄지정하는 것입니다. rel=0은 관련영상 안띄우기, loop=1은 반복재생시키기입니다. loop=1을 하면 자기자신을 포함한 playlist를 자동으로 추가해서 반복재생할 수 있게 만듭니다.

필요에 따라 0,1을 바꿔넣으면 되며, 비워두면 오류나요. 유튜브 기본값은 rel=1 이며, 티스토리 플러그인에서 집어넣은 것은 rel=0 입니다. 루프는 항상 기본 0입니다. playlist 파라메터 안넣으면 루프도 안되요.


<script src="./images/_ytb_react_center.js"></script>
<script>_ytb_react_center(0,1);/* (rel,loop) 0=no 1=yes author: kLiR http://elswordcalc.tistory.com/29 */</script>

_ytb_react_center.rar 이건 파일 버전. .js 파일을 업로드한 뒤, 마찬가지로 </BODY> 위에다 삽입하면 됩니다. 함수가 메모리에 남습니다만 중복 실행은 안됩니다. 한번 처리한건 "width"와 "height" 속성을 지워버리기 때문에 조건일치가 안되서 중복처리는 안됩니다.


스크립트 동작 원리 요약 :

페이지 내의 IFRAME 태그를 쭉 훑으면서, "width"와 "height" 속성이 모두 정의되어 있고, "src" 주소가 "http://www.youtube.com/embed/..." 인 IFRAME을 찾습니다. "https..."도 찾습니다.

조건이 일치한 IFRAME 앞에 진리의 3단 DIV태그를 생성한 뒤, IFRAME을 그 안에 옮겨넣고 스타일을 대입해줍니다.

조건이 일치한 IFRAME의 "src" 주소의 rel, loop 파라메터를 변경하거나 없으면 추가합니다. loop=1 로 지정하길 원하는 경우 playlist 파라메터를 추가하며, 이미 playlist 파라메터가 있는 경우엔 놔둡니다.

페이지의 HTML을 거의 다 읽었을 때, 딱 한번만 실행됩니다. onload event에 넣을 이유가 없어서 바로 실행하기 때문에 이미지 파일등이 덜 로딩되어 있어도 처리되죠.


IE7 이하에서는 그냥 스크립트 실행을 안합니다. IE7부터 max-width를 지원하긴 하는데 doctype이나 기타 여러 상황에 따라 기묘하게 반응하기 때문. 각종 스킨의 IE 처리문하고 충돌할 수도 있고. 혹시 소스코드에서 처음에 [0-7] 글자를 [0-6]으로 수정하고 IE7 에뮬레이터로 볼 때 제대로 보인다면 [0-6]인 상태로 쓰세요.


아래처럼,

이렇게 툭, 던져넣었다면,


이렇게 됩니다.


주의사항이 있다면, width가 정의가 안되있을 때 자동적으로 쪼그라드는 element안에서는 폭이 0이 되어서 안보일수도 있다는거... 물론 티스토리 스킨의 본문부분을 그렇게 배치할 이유도 없고 HTML 규격(?)상 권장하지도 않으니 그런 스킨은 없을테지만요. HTML 권장사항? 같은걸 보면 inline element안에 block element를 배치하는건 지양하라고 하더군요. 폭이 0이 되어서 안보인다는건 이 지양해야할 상황을 말하는 거 같네요.

이 지양해야할 상황중 일부는 MSIE랑 MS Edge가 잘 잡아냅니다. [외부링크]이해할 수 없는 오류를 콘솔에 출력하면서 말이죠. 링크의 글 밑에 답변도 같이 보면 도움이 됩니다. 요컨대, <SPAN>이나 <P>안에다가 <DIV>를 쳐넣는건 삼가하라고 하네요. 그리고 또, <TABLE>이나 "position:absolute;" 같은거안에 넣는 경우엔 알아서 잘 처신해야...

저작자 표시
신고

Comment : 0

1 ··· 11 12 13 14 15 16 17 18 19 ··· 31
Powered by Kakao & Tistory   /   Designed by kLiR.
kLiR's Tistory tips