메인페이지에서 유튜브 영상이 바로 나오게 처리하고 싶습니다.
본문
어떻게 수정해서 여기까지 만들게 되었는데요.
주일설교 <--- 라는 메인게시판이 게시판 목록이 나오는 것이 아니라
곧바로 플레이 될 수 있도록 해당 게시판 크기만큼의 크기로 유튜브화면이 띄워져 있으면 좋겠습니다.
혹시 소스를 어떻게 구현하면 되는지만 써주시면 제가 응용해보도록 하겠습니다.
답변 4
게시판 글쓰기에서 첫번째 링크에 유투브 전체 주소 넣으시고요...
예시) https://www.youtube.com/embed/Li3i9cavAf0
최신게시물 소스는
latest.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>
<style>
.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}
</style>
<?php for ($i = 0; $i < count($list); $i++) {
$link1_id = $list[$i]['wr_link1'];
?>
<div class="video-wrap">
<iframe id="video" width="100%" height="315" src="<?php echo $link1_id; ?>" frameborder="0" allow="encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<?php } ?>
<?php if (count($list) == 0) { //게시물이 없을 때 ?>
<div>게시물이 없습니다.</div>
<?php } ?>
이렇게 해주시면 되요.. !-->
<div class="video-wrap">
<iframe id="video" width="100%" height="315" src="https://www.youtube.com/embed/Li3i9cavAf0" frameborder="0" allow="encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
css를
.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}
하시면 됩니다...
!-->https://www.youtube.com/embed/Li3i9cavAf0
유투브ID : Li3i9cavAf0 를
여분필드에 넣어서 최근게시물에 뿌릴때 여분필드 값을 가져오면 되죠
1. 글쓰기에서 여분필드 (예) wr_10 에 유투브ID를 입력 받는다.
2. 최근게시물 소스에 위 iframe 부분을 넣는다.
<?php for ($i = 0; $i < count($list); $i++) {
$youtube_id = $list[$i]['wr_10'];
?>
<div class="video-wrap">
<iframe id="video" width="100%" height="315" src="https://www.youtube.com/embed/<?php echo $youtube_id; ?>" frameborder="0" allow="encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<?php } ?>
<?php if (count($list) == 0) { //게시물이 없을 때 ?>
<div>게시물이 없습니다.</div>
<?php } ?>
<style>
.yt-div { max-width:100%; margin:0 auto }
.yt-div div { position:relative; padding-top:56.25%; overflow:hidden; border-radius:10px }
.yt-div iframe { display:block; width:100%; height:100%; position:absolute; top:0 }
</style>
<div class="yt-div"><div>
<iframe src="https://klesis38.cafe24.com/bbs/board.php?bo_table=menu_02_01&wr_id=2" frameborder=0 allowfullscreen></iframe>
</div></div>
index.php에서 응용해 보세요.
!-->