메인페이지에서 유튜브 영상이 바로 나오게 처리하고 싶습니다.

메인페이지에서 유튜브 영상이 바로 나오게 처리하고 싶습니다.

QA

메인페이지에서 유튜브 영상이 바로 나오게 처리하고 싶습니다.

본문

교회홈페이지 (cafe24.com)

 

어떻게 수정해서 여기까지 만들게 되었는데요.

 

주일설교 <--- 라는 메인게시판이 게시판 목록이 나오는 것이 아니라

 

곧바로 플레이 될 수 있도록 해당 게시판 크기만큼의 크기로 유튜브화면이 띄워져 있으면 좋겠습니다.

 

혹시 소스를 어떻게 구현하면 되는지만 써주시면 제가 응용해보도록 하겠습니다. 

이 질문에 댓글 쓰기 :

답변 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%;}

 

하시면 됩니다...

http://*** 개인정보보호를 위한 이메일주소 노출방지 ***
위 홈페이지 메인에 표시되는 게시판 리스트로 표시되는 것을 ~

최신 게시판 로우안에 있는 유튜브 링크주소를 가져와서

게시판 리스트가 표시되는 것이 아니라 .... 게시판 크기만큼의 유튜브 화면이 곧바로 나오도록 만들고 싶다는 의미랍니다.

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에서 응용해 보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 20
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT