필요하신분이 계셔서 먼지팁 공유합니다.

여분필드 wr_1에 유튜브 동영상의 ID값만 입력해서

유튜브 동영상 및 썸네일 출력하는 방법 입니다.

 

동영상ID 는 유튜브 동영상 주소에보시면 마지막 빨간부분이 해당동영상의 ID입니다.

예) https://www.youtube.com/watch?v=Jx6YfRSUer0

 

-------------------------------------------------------------

유튜브는 기본적으로 썸네일을 지원하고 있고 대표적인 형태는 아래와 같습니다.

 

중간해상도 썸네일(표준) (640x480)

https://img.youtube.com/vi/동영상ID/sddefault.jpg  

 

https://webdir.tistory.com/472 / 이외 다양한 썸네일 종류 참고

-------------------------------------------------------------

 

위 내용을 참고로 게시판에 아래와같이 적용하시면 되겠습니다.

다른 좋은방법은 많을 수 있습니다~ 간단하게 추가할 수 있는 방법 입니다.

 

 

write.skin.php

유튜브 ID값을 입력하도록 여분필드 1을 추가합니다.

 

[code]

<input type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>">

//여분필드 wr_1에 유튜브 ID값을 입력받음

[/code]

 

 

list.skin.php

기존 썸네일 출력하는 if문에 에 유튜브 썸네일 코드를 else if 로 추가합니다.

 

[code]

} else if ($list[$i]['wr_1']){
    $img_content = '<img src="https://img.youtube.com/vi/'.$list[$i]['wr_1'].'/sddefault.jpg">';

}

//wr_1에 입력된 값이 있는 경우 동영상 썸네일 출력

[/code]

 

 

view.skin.php

동영상을 출력하기 위해 유튜브 임베드 코드를 추가합니다.

 

[code]

<?php if ($view['wr_1']) { ?>
    <div class="video-container">
    <iframe width="100%" src="https://www.youtube.com/embed/<?php echo $view['wr_1']; ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
<?php } ?>

//wr_1에 입력된 값이 있는 경우 동영상 출력

//iframe width="100%" 부분은 적용될 게시판의 레이아웃에 맞게 조정하세요~

[/code]

 

 

이상입니다.

다양하게 응용해보세요~