메인에 video screen effect를 적용해 보았습니다

비타주리님의 팁(https://sir.kr/g5_tip/15911?sfl=wr_name%2C1&stx=%EB%B9%84%ED%83%80%EC%A3%BC%EB%A6%AC)을 사용하여 메인에 video screen effect를 적용해보았습니다.

index.php의 적당한 위치에 아래 코드를 넣어줍니다.

<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/index.php');
    return;
}

include_once(G5_THEME_PATH.'/head.php');
?>

<h2 class="sound_only">최신글</h2>

<h2 id="kims_s" style="font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif'; font-size: 30px;">Video Screen Effect</h2>
<!-- 이미지 블렌드효과 넣기 시작 2021.8.01-->
<a href="http://gratia.kr">
<div id="kims" style=width:965px;height:543px;background:url(http://pws.co.kr/zz/myimg.png)>
    <video style=width:100%;mix-blend-mode:screen src=http://pws.co.kr/zz/video/myvideo.mp4 autoplay loop muted></video>
</div></a>
<!-- 이미지 블렌드효과 넣기 끝 2021.8.01-->

<!--이미지 감추기 시작 2021.8.31-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("#kims").hide();
  });
  $(".btn2").click(function(){
    $("#kims").show();
  });
});
</script>
<button class="btn1">Video Hide</button>
<button class="btn2">Video Show</button>
<!--이미지 감추기 끝 2021.8.31-->

이하 코드생략.

첨부한 영상은 에펙으로 파티클 영상으로 간단하게 만든 것입니다.
영상크기가 1280*720입니다. 사진도 같은 크기로 만들어서 업로드합니다.

사진의 background:url(http://pws.co.kr/zz/myimg.png)에 사진이 위치한 절대 경로를 입력해줍니다.

영상의 소스에 src=http://pws.co.kr/zz/video/myvideo.mp4 영상이 위치한 절대 경로를 입력해줍니다.
그누보드 외부로그인을 제외한 화면 가로크기가 965px 입니다.
그래서 화면에 꽉차게 보이게 하려면 <div> 크기를 width="965px: height="543px: 으로 하면 됩니다.
토글을 사용하여 영상이 보였다 보이지 않았다하게 만들었습니다.

감사합니다.^^