사이트 활용팁
2024.11.19 04:44
링크1, 링크2에 유튜브, 비메오 영상 링크 등록 시 본문 출력 및 자동재생
동영상 게시물 자동 재생 기능 추가 (유튜브/비메오)
이제 게시물에 유튜브나 비메오 영상 링크를 등록하면 본문에 자동으로 영상이 출력되고 재생됩니다.
1. 링크 자동 감지 및 변환: 게시물 작성 시 \'링크1\' 또는 \'링크2\' 칸에 유튜브나 비메오 영상 주소를 넣으면, 시스템이 자동으로 이를 감지하여 영상 플레이어로 바꿔줍니다.
2. 본문 자동 출력 및 재생: 변환된 영상은 게시물 본문에 바로 나타나며, 방문자가 페이지에 들어왔을 때 자동으로 재생됩니다. (음소거 상태로 시작)
3. 영상 비율 유지: 어떤 화면 크기에서도 영상이 16:9의 비율을 유지하며 깔끔하게 표시되도록 설정되었습니다.
이 기능을 통해 게시물에 동영상을 올리는 것이 훨씬 편리해지고, 방문자들은 별도의 클릭 없이 바로 영상을 시청할 수 있어 더욱 풍부한 콘텐츠 경험을 할 수 있습니다.
이제 게시물에 유튜브나 비메오 영상 링크를 등록하면 본문에 자동으로 영상이 출력되고 재생됩니다.
1. 링크 자동 감지 및 변환: 게시물 작성 시 \'링크1\' 또는 \'링크2\' 칸에 유튜브나 비메오 영상 주소를 넣으면, 시스템이 자동으로 이를 감지하여 영상 플레이어로 바꿔줍니다.
2. 본문 자동 출력 및 재생: 변환된 영상은 게시물 본문에 바로 나타나며, 방문자가 페이지에 들어왔을 때 자동으로 재생됩니다. (음소거 상태로 시작)
3. 영상 비율 유지: 어떤 화면 크기에서도 영상이 16:9의 비율을 유지하며 깔끔하게 표시되도록 설정되었습니다.
이 기능을 통해 게시물에 동영상을 올리는 것이 훨씬 편리해지고, 방문자들은 별도의 클릭 없이 바로 영상을 시청할 수 있어 더욱 풍부한 콘텐츠 경험을 할 수 있습니다.
01. 함수추가 페이지 상단 <?php ?> 사이에 추가
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
// 링크1과 링크2에 대해 YouTube, Vimeo 링크를 감지하고 변환
function embed_video_with_autoplay($url) {
// 유튜브 URL 처리
if (preg_match('/youtu\.be\/([a-zA-Z0-9_-]+)/', $url, $matches) ||
preg_match('/youtube\.com\/.*v=([a-zA-Z0-9_-]+)/', $url, $matches)) {
$video_id = $matches[1];
return "<iframe width='100%' height='315' src='https://www.youtube.com/embed/{$video_id}?autoplay=1&mute=1' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>";
}
// 비메오 URL 처리
if (preg_match('/vimeo\.com\/(\d+)/', $url, $matches)) {
$video_id = $matches[1];
return "<iframe width='100%' height='315' src='https://player.vimeo.com/video/{$video_id}?autoplay=1&mute=1' frameborder='0' allow='autoplay; fullscreen' allowfullscreen></iframe>";
}
// 유튜브나 비메오 URL이 아니면 빈 문자열 반환
return "";
}
?>
02. style 부분 추가
<style>
iframe {
width: 100%;
aspect-ratio: 16 / 9; /* 16:9 비율 */
height: auto; /* 실제 높이는 aspect-ratio에 의해 자동 계산됨 */
}
</style>
03. 본문 출력
<?php echo get_view_thumbnail($view['content']); ?> 위 또는 아래 원하는 위치에 아래 코드 추가
<!-- 본문 내용 시작 { -->
<div id="bo_v_con">
<?php
// 파일 출력
$v_img_count = count($view['file']);
if($v_img_count) {
echo "<div id=\"bo_v_img\">\n";
foreach($view['file'] as $view_file) {
echo get_file_thumbnail($view_file);
}
echo "</div>\n";
}
?>
<?php
// 링크1과 링크2 유튜브 또는 비메오 링크 일 경우 본문에 영상 자동재생 되도록 출력
$link1_embed = $view['link'][1] ? embed_video_with_autoplay($view['link'][1]) : '';
$link2_embed = $view['link'][2] ? embed_video_with_autoplay($view['link'][2]) : '';
// 출력
echo $link1_embed;
echo $link2_embed;
?>
<?php echo get_view_thumbnail($view['content']); ?>
</div>
공유하고, 소통하다
빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다.
또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기
주의사항.
본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다.
또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.
본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기
- 이전글게시판 목록 상단에 조회순, 추천순, 날짜순으로 글 목록 정렬하기2025.05.24
- 다음글plyr.io 사용한 동영상 게시판, 영상 자동재생2024.11.19
댓글목록
게시물의 내용을 꼼꼼히 살펴보니 링크1과 링크2에 YouTube 또는 Vimeo 링크가 있는 경우 본문에 영상이 자동 재생되는 기능을 추가하는 훌륭...
게시물의 내용을 꼼꼼히 살펴보니 링크1과 링크2에 YouTube 또는 Vimeo 링크가 있는 경우 본문에 영상이 자동 재생되는 기능을 추가하는 훌륭한 방법을 소개해주신 것 같습니다. 이 기능은 특히 영상 콘텐츠를 강조하는 게시물에 유용할 것입니다. 본문에 영상을 추가하여 방문자의 참여를 높이고 콘텐츠의 가치를 향상시킬 수 있게 해주는 유용한 팁이라고 생각합니다.