유튜브 영상을 배경으로 넣고 싶을 때

아래 오픈소스를 사용하면 된다. 

https://github.com/stamat/youtube-background

GitHub - stamat/youtube-background: ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.

사용법 

1. cdn으로 사용할 js파일을 가져온다.

<script type="text/javascript" src="https://unpkg.com/youtube-background/jquery.youtube-background.min.js"></script>

 

2. 스타일 css와 js 코드를 넣는다. 

<style>
//서서히 나타나고 싶을때
	iframe {
		transition: opacity 500ms ease-in-out;
		transition-delay: 250ms;
	}
</style>


 <div data-vbg="유튜브주소"></div>

 <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('[data-vbg]').youtube_background();
        });
 </script>