유튜브 동영상 배경에 나타내기

글에는 속도 때문에 유튜브 동영상을 나타나게 하지 않았지만 이 블로그 메인을 보면 유튜브 동영상을 요소 배경에 나타난다. 이 글에서 그것에 대해 적으려고 한다. 이 글에서 설명할 동영상은 유튜브 동영상이라는 점을 알았으면 한다. 

크롬에서 유튜브 자동재생 못하여 수정하려 했지만 그만두었다. 크롬이 아닌 다른 브라우저에서 문제없어 귀찮아 그만두었다. 그러나 이번에는 반드시 수정해야 했다. 왜냐하면 이 블로그에 SSL을 적용하면 모든 브라우저에서 안 됐기 때문이었다. 수정하면 크롬의 자동재생 문제도 해결할 수 있으면서 SSL에서도 제대로 된다. 참고로 크롬에서 몇 개월 전 유튜브 자동재생을 할 수 없게 했다. 그러면 유튜브 재생 버튼이 보인다. 그리고 아래 그림은 구글 애널리틱스 통계에 나타난 이 블로그 방문자의 브라우저 통계에 대한 것이다. 아래 그림으로 크롬(Chrome) 사용자가 가장 많다는 것을 알 수 있다. 

배경에 유튜브 동영상을 재생하게 할 수 있는 법을 배울 수 있는 사이트는 https://github.com/pupunzi/jquery.mb.YTPlayer다. 그림으로 설명하면 아래 그림 2번처럼 파란색 테두리 전체에 적용하는 것이다. 나는 전체가 아니라 아래 그림 빨간색 테두리 1번처럼 요소에 적용한 부분을 설명하려 한다. 직접 보고 싶다면 이 블로그 메인, 방명록 등을 보면 된다. 배경에 적용하는 것을 그 페이지를 봤으면 한다. 참고로 그 페이지는 영어로 설명됐고 Demo(데모), (Doc(강좌) 등을 보면 자세히 배울 수 있다.

내 블로그에서

1. jQuery 사용 : 적용하려면 jQuery를 사용해야 하는데, 부트스트랩이 jQuery를 사용하므로 사용하지 않았다.이것 말고도 jQuery를 사용하는 스크립트는 웬만하면 중복 사용하지 않는다. 

2. 적용하는 곳 : 강좌에는 적용하는 곳이 body이지만 이 블로그는 아래 그림 3번처럼 .video_section이라는 요소이다.  

Doc인 강좌 페이지를 보면 아래 그림 4번처럼 body다. containment 속성에 대한 설명이 (string) the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element.라고 나왔는데, 무슨 말인지 모르겠다. data-property에 여러 속성이 나온다.

  

윈도우10 홈과 프로 차이