글에 유튜브동영상배경 넣기

 

이 글에 나타나는 것은 유튜브 동영상 배경이다. 유튜브 동영상을 간단히 사용하는 방법을 알고 싶었는데 부트스트랩4로 스킨만들기를 익히다가 부트스트랩을 사용하지 않고 유튜브 동영상을 CSS와 HTML를 사용하고서 웹페이지에 사용하는 방법을 알았다. 참고로 이 블로그 메인은 동영상 배경은 유튜브 동영상이고 방명록에 있는 배경은 MP4 동영상을 사용한 배경이다. 참고로 여기에 적을 내용은 멋있지만 머리가 아플 것이다. 그러니 어려우면 rn구경만 하고 넘어가기 바란다. .그리고 네이버나 다음 블로그 등에서 하지 말았으면 한다. 

 

 

 

 

메인에 있는 동영상은 스크립트를 사용한 것이고 여기에서 적을 내용은 스크립트를 사용하지 않고 CSS와 HTML만을 사용할 것이다. 스크립트는 필요없다. 

그리고 방명록에서 사용한 동영상도 CSS와 HTML만을 이용했는데 MP4라는 동영상이 필요했다. 그렇게 하는 것은 2016/03/08 - 동영상 배경 나오는 것을 해결했다에서 적었으니 참조 바란다. 

여기에서 다룰 동영상 배경은 유튜브 동영상 배경이니 동영상이 필요 없다. 웹페이지에 삽입하는 소스는 아래에서 복사할 수 있다. 참고로 아래 결과(result)에 나오는 뮤직비디오는 방탄소년단의 DNA다. 그리고 소리도 나오니 주의했으면 한다. 그리고 아래 에디터는 jsFiddle이라는 것이다. 

 

 

 

 

난 이 소스를 티스토리 글에 아래 그림과 같이 적용했다. 아래 그림에서 1번은 부트스트랩3에서 스마트폰에서 요소를 숨기는 것으로 배경이 나타나지 않게 한다. 스마트폰에서 동영상 배경이 안 나온다. 그리고 소리가 안 나게 3번과 같이 mute=1이라는 것을 추가했다. 만약 소리나게 하고 싶다면 삭제하면 된다. 위 소스의 결과에 보면 소리가 나온다. 위에서 CSS 소스에 아래 그림을 보듯이 앞뒤로 <style>과 </style>을 추가한다. 

 

 

 

 

 

여기에서 중요한 것은 동영상 주소인데 위 그림에서 2번만 변경하면 된다. 즉 트와이스 동영상을 방탄소년단 동영상으로 변경하고 싶다면 간단히 2번을 아래 그림 4번으로 교체하면 된다.