결과물은 아래와 같습니다. 재생, 일시정지, 소리 키우기, 소리 줄이기, 소리 끄기 등의 기능을 추가했습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tubular 플러그인 연습</title>
<style>
*{
margin:0;
padding:0;
}
a, a:visited{
text-decoration: none;
margin: 5px 15px;
color:black ;
}
</style>
</head>
<body>
<div id="wrapper">
<a href="#" class="tubular-play">재생</a>
<a href="#" class="tubular-pause">일시정지</a>
<a href="#" class="tubular-volume-up">소리 키우기</a>
<a href="#" class="tubular-volume-down">소리 줄이기</a>
<a href="#" class="tubular-mute">소리 끄기</a>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<script>
$(function(){
var options={
videoId:'nX9JzvAw3rM',
start:0 // 0초 부터 시작
}
$('#wrapper').tubular(options);
});
</script>
</body>
</html>
자바스크립트에 tubular 플러그인을 추가하고 videoId에 유튜브 영상 아이디를 입력하여 html영역의 wrapper가 실행될 때 배경으로 유튜브 동영상이 실행되도록 설정하였습니다. tobular 플러그인 기능을 통해 재생, 일시정지 등의 기능을 추가했습니다.
댓글