사이트 활용팁

2024.11.19 04:44

링크1, 링크2에 유튜브, 비메오 영상 링크 등록 시 본문 출력 및 자동재생

동영상 게시물 자동 재생 기능 추가 (유튜브/비메오)
이제 게시물에 유튜브나 비메오 영상 링크를 등록하면 본문에 자동으로 영상이 출력되고 재생됩니다.

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>
    0 0
    공유 더보기
    페이스북으로 공유 트위터로 공유 카카오톡으로 공유 공유링크 공유
소개 공유하고, 소통하다

빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. ... 자세히보기


또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기

저작권 저작권 저작권 주의사항.

본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. ... 자세히보기


또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.


본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기