한 페이지에 넣고 싶은데 어떻게 하죠? 초보입니다.
본문
html
<div class="wrap">
<div class="contents">
<div class="video_w">
<div id="myPlayer" class="myPlayer"></div>
</div>
<div class="video_control">
<div class="time">
<!-- <div class="progress">
<div class="progress_bar"></div>
</div> -->
<span class="now_time"></span>
<span class="total_time"></span>
</div>
<div class="btn_w">
<button class="btn_prev" onclick="$('#myPlayer').YTPPlayPrev()">Prev</button>
<button class="btn_play pause">Pause</button>
<button class="btn_next" onclick="$('#myPlayer').YTPPlayNext()">Next</button>
</div>
<!--
<div class="sound">
<button class="btn_mute off" onclick="$('#myPlayer').YTPToggleVolume()">소리ON</button>
</div>
-->
</div>
</div>
</div>
style
.wrap{
position: relative;
padding: 40px 20px;
}
.wrap::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: -3;
width: 100%;
height: 50%;
background-color: rgb(13, 68, 50);
transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-ms-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
}
.wrap.on::after{
background-color: rgb(0, 89, 130);
}
.contents{
width: 100%;
max-width: 600px;
margin: auto;
}
.video_w{
overflow: hidden;
position: relative;
z-index: -1; width: 100%;
background: #222;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
/* 컨트롤러 */
.video_control{
position: relative;
padding: 20px 0;
text-align: center;
}
/* 시간 */
.time{
position: absolute;
top: 20px;
left: 10px;
}
.time::after{
content: '';
position: absolute;
top: 50%; left: 0;
width: 90%;
height: 1px;
margin-left: 5%;
background: #ddd;
}
.time span{
display: block;
padding: 4px 0;
font-size: 12px;
font-weight: 400;
color: #f4f4f4;
}
/* 이전 / 재생 / 다음 버튼 */
.btn_w button{
cursor: pointer;
display: inline-block;
margin: 0 5px;
width: 50px;
height: 50px;
background-color: #222;
border-radius: 50%;
border: 0;
outline: 0;
font-size: 12px;
color: #fff;
}
.btn_w button:hover{
background-color: #000;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}
/* 음소거 버튼 */
/*.sound{
position: absolute;
top: 20px;
right: 10px;
}
.btn_mute{
cursor: pointer;
display: inline-block;
margin: 0 5px;
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
border: 0;
outline: 0;
font-size: 12px;
color: #fff;
}
.btn_mute:hover{
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}*/
js코드
$(function(){
// play list 선언
var videos = [
{videoURL:"3wRQW-W9Dio",containment:'self',autoPlay:true, mute:true, startAt:0, opacity:1, loop:false, showControls:false, useOnMobile:true, stopMovieOnBlur :false, abundance: 0, showYTLogo: false },
{videoURL: "tqqQrkDZwDQ",containment:'self',autoPlay:true, mute:true, startAt:0, opacity:1, loop:false, showControls:false, useOnMobile:true, stopMovieOnBlur :false, abundance: 0, showYTLogo: false },
{videoURL: "UibHaVxghZM",containment:'self',autoPlay:true, mute:true, startAt:0, opacity:1, loop:false, showControls:false, useOnMobile:true, stopMovieOnBlur :false, abundance: 0, showYTLogo: false }
];
// play list 불러오기
$("#myPlayer").YTPlaylist(videos, false);
/** 컨트롤러 조작 **/
// 총시간 가져오기
$('#myPlayer').on("YTPTime",function(e){
var currentTime = $('#myPlayer').YTPGetTime();
$('.now_time').html('NOW : '+ currentTime );
var totalTime = $('#myPlayer').YTPGetTotalTime();
$('.total_time').html('TOTAL : '+ totalTime );
});
// pause 버튼 과 play 버튼 toggle
$('.btn_play').click(function(){
if( $(this).hasClass('pause') ){
$('.wrap').addClass('on');
$('#myPlayer').YTPPause();
$(this).removeClass('pause').addClass('play').text('Play');
}else{
$('.wrap').removeClass('on');
$('#myPlayer').YTPPlay();
$(this).removeClass('play').addClass('pause').text('Pause');
}
});
//음소거 버튼
/*$('.btn_mute').click(function(){
if( $(this).hasClass('off') ){
$(this).removeClass('off').addClass('on').text('소리ON');
}else{
$(this).removeClass('on').addClass('off').text('소리OFF');
}
});*/
});
입니다.
스타일 html 스크립 명령어를 주어도 실행이 안되네요!
초보라...죄송합니다.
답변 3
어설프게 소스코드 붙이지말고
어디에서 실행하는지 URL 남겨주세요.
그리고 자바스크립트의 대부분의 실행오류는 F12 누르셔서 콘솔탭에서 알려줍니다.
HTML 파일이라고 하셔서 독립적으로 페이지를 뺀것 같은데
당연히 작동하지 않죠.
제이쿼리 라이브러리도 로드해야하고
YTP 플러그인도 로드해야 합니다.
위 페이지 그대로 사용시 안되는게 맞습니다.
실행은 되죠! 작동은되는데 어떤 이유로 오류가 나오는지.. 그런것들을 적어주셔야죠
<style>
.wrap{
position: relative;
padding: 40px 20px;
}
.wrap::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: -3;
width: 100%;
height: 50%;
background-color: rgb(13, 68, 50);
transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-ms-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
}
.wrap.on::after{
background-color: rgb(0, 89, 130);
}
.contents{
width: 100%;
max-width: 600px;
margin: auto;
}
.video_w{
overflow: hidden;
position: relative;
z-index: -1; width: 100%;
background: #222;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
/* 컨트롤러 */
.video_control{
position: relative;
padding: 20px 0;
text-align: center;
}
/* 시간 */
.time{
position: absolute;
top: 20px;
left: 10px;
}
.time::after{
content: '';
position: absolute;
top: 50%; left: 0;
width: 90%;
height: 1px;
margin-left: 5%;
background: #ddd;
}
.time span{
display: block;
padding: 4px 0;
font-size: 12px;
font-weight: 400;
color: #f4f4f4;
}
/* 이전 / 재생 / 다음 버튼 */
.btn_w button{
cursor: pointer;
display: inline-block;
margin: 0 5px;
width: 50px;
height: 50px;
background-color: #222;
border-radius: 50%;
border: 0;
outline: 0;
font-size: 12px;
color: #fff;
}
.btn_w button:hover{
background-color: #000;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}
</style>
<div class="wrap">
<div class="contents">
<div class="video_w">
<div id="myPlayer" class="myPlayer"></div>
</div>
<div class="video_control">
<div class="time">
<!-- <div class="progress">
<div class="progress_bar"></div>
</div> -->
<span class="now_time"></span>
<span class="total_time"></span>
</div>
<div class="btn_w">
<button class="btn_prev" onclick="$('#myPlayer').YTPPlayPrev()">Prev</button>
<button class="btn_play pause">Pause</button>
<button class="btn_next" onclick="$('#myPlayer').YTPPlayNext()">Next</button>
</div>
<!--
<div class="sound">
<button class="btn_mute off" onclick="$('#myPlayer').YTPToggleVolume()">소리ON</button>
</div>
-->
</div>
</div>
</div>
<script>
$(function(){
// play list 선언
var videos = [
{videoURL:"3wRQW-W9Dio",containment:'self',autoPlay:true, mute:true, startAt:0, opacity:1, loop:false, showControls:false, useOnMobile:true, stopMovieOnBlur :false, abundance: 0, showYTLogo: false },
{videoURL: "tqqQrkDZwDQ",containment:'self',autoPlay:true, mute:true, startAt:0, opacity:1, loop:false, showControls:false, useOnMobile:true, stopMovieOnBlur :false, abundance: 0, showYTLogo: false },
{videoURL: "UibHaVxghZM",containment:'self',autoPlay:true, mute:true, startAt:0, opacity:1, loop:false, showControls:false, useOnMobile:true, stopMovieOnBlur :false, abundance: 0, showYTLogo: false }
];
// play list 불러오기
$("#myPlayer").YTPlaylist(videos, false);
/** 컨트롤러 조작 **/
// 총시간 가져오기
$('#myPlayer').on("YTPTime",function(e){
var currentTime = $('#myPlayer').YTPGetTime();
$('.now_time').html('NOW : '+ currentTime );
var totalTime = $('#myPlayer').YTPGetTotalTime();
$('.total_time').html('TOTAL : '+ totalTime );
});
// pause 버튼 과 play 버튼 toggle
$('.btn_play').click(function(){
if( $(this).hasClass('pause') ){
$('.wrap').addClass('on');
$('#myPlayer').YTPPause();
$(this).removeClass('pause').addClass('play').text('Play');
}else{
$('.wrap').removeClass('on');
$('#myPlayer').YTPPlay();
$(this).removeClass('play').addClass('pause').text('Pause');
}
});
//음소거 버튼
/*$('.btn_mute').click(function(){
if( $(this).hasClass('off') ){
$(this).removeClass('off').addClass('on').text('소리ON');
}else{
$(this).removeClass('on').addClass('off').text('소리OFF');
}
});*/
});
</script>
이런식으로 하면 작동하나요? 유튜브가 안불러지네요!!!ㅠㅠㅠㅠㅠ
그누보드 내에서 작동하나요? 아님 개별적으로 하신단거에요?
리오닥터님.. 넘 감사드려요!
그누보드에서 작동하고 싶습니다.
꾸~~우~~벅~~
네~ 그누보드에서 head.php랑 tail.php 을 위랑 아래 연결 시키면되요
아니면 직접 하려면 html 태그를 빠진부분을 연결 해야되구요
친절한 답변 감사드립니다. 뒤늦게 공부하는 50대 아재입니다. 동네 탁구 동호회 홈페이지를 만들고있어서 공부 시작했는데 어렵네요...그누보드 회사소개 페이지을 동호회소개페이지로 해서 다음과 같은 유튜브 동영상을 넣고 싶었습니다. https://codepen.io/gyuri-v/pen/ExgLRvy
다시한번 감사드립니다. 어렵네요~~
답변을 작성하시기 전에 로그인 해주세요.
