〃 IT/〃 블로그정보

유튜브영상을 플로팅처럼 스크롤에따라 떠다니게만들기

백장미꽃 2014. 8. 19. 10:58
반응형

 유튜브 영상을플로팅으로..


 

안녕하세요? 유튜브 영상을 플로팅으로 스크롤에따라서 움직이게 하는법을 적어볼건데 저도 지금 그냥 테스트로 달아보긴했는데 아마 곧 제거를 하지 않을까 싶습니다. 일단 이렇게 다는 방법을 적어드리는것뿐이니 선택은 직접 하시길바라며 약간 블로그페이지의 로딩이 길어질수도 있습니다.  일단 영상으로 보시지요..

 

 

▲ 영상에 보시면 좌측에 조그마한 광고가 있고 그위에 유튜드 동영상이 플로팅으로 떠있습니다. 그리고 스크롤을 하여도 계속하여 진행이됩니다. 하지만 저것은 방문자가 다른페이지로 이동을하게되면 정지가되게되는경우입니다. 페이지가 바뀌니 장연히 그러는것입니다.

 

 

 

▲ 위에처럼 하기위해선 영상의 소스틀 퍼와야합니다. 유튜브에서 퍼올 영상의 소스코드로 이동하여 퍼오는데 여기서 중요한건 영상의 사이즈를 내가 띄오고자 하는 사이즈를 잘 맞춰서 수정하셔야합니다. 제가 위에 올린영상의 사이즈는 가로 150 세로 120 으로 수정한 영상입니다. 조금더 크게 보이고 싶다면 사이즈를 수정해주시면 됩니다.

 

 

[〃 IT/〃 블로그정보] - 티스토리 유튜브 동영상 고화질로 링크걸기

▲ 영상을 고화질로 자동 재생하고싶다면 위에글을 보세요

 

 

▲ 해당 소스를 넣어주시면되는데 위에 치환자 아래부분에 저는 소스를 넣었습니다.

 

 

▲ 위에 소스를 넣어주시면 됩니다. 위에 영상에 있듯이 제가 올린것은 광고와 유튜브가 같이 되어있습니다. 만약에 유튜브만 한다면 광고소스 부분만 삭제를 하시면 되십니다. 이것은 유튜브 영상뿐만이 아니고 소스로 퍼올수있는 동영상이면 다른 동영상 사이트도 무관합니다.

 

위에 소스에서 자신의 블로그에 맞게 위치를 정해주셔야합니다.

MARGIN-left: -660px (블로그 정중앙에서 좌측으로 얼마만큼 떨어지게 할것인지)

TOP: 60% (상단에서 몇프로의 위치에 할것인지)

left: 45% (좌측에서 몇프로 떨어지게 할것인지)

 

유튜브플로팅.txt

▲ 위에 소스파일입니다.

 

영상을 플로팅으로 올리는 방법을 올려드렸습니다. 플로팅광고 소스를 그냥 응용한것이니 위에처럼 응용을 하실지 안하실지는 직접 선택을하시고 다른 문제가 없는지 확인하시고 응용하시면 좋을듯 하기도합니다.

 

 

반응형