메인에 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: 으로 하면 됩니다.
토글을 사용하여 영상이 보였다 보이지 않았다하게 만들었습니다.

감사합니다.^^
댓글 2개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2484 | 1년 전 | 1263 | ||
| 2483 | 1년 전 | 864 | ||
| 2482 | 1년 전 | 712 | ||
| 2481 | 1년 전 | 1082 | ||
| 2480 | 1년 전 | 1185 | ||
| 2479 | 1년 전 | 840 | ||
| 2478 | 1년 전 | 1177 | ||
| 2477 | 1년 전 | 780 | ||
| 2476 | 1년 전 | 1587 | ||
| 2475 | 1년 전 | 923 | ||
| 2474 |
|
1년 전 | 935 | |
| 2473 | 1년 전 | 1519 | ||
| 2472 | 1년 전 | 861 | ||
| 2471 | 1년 전 | 918 | ||
| 2470 | 1년 전 | 788 | ||
| 2469 | 1년 전 | 1373 | ||
| 2468 | 1년 전 | 2958 | ||
| 2467 | 1년 전 | 853 | ||
| 2466 |
|
1년 전 | 1481 | |
| 2465 | 1년 전 | 803 | ||
| 2464 | 1년 전 | 1182 | ||
| 2463 | 1년 전 | 1352 | ||
| 2462 | 1년 전 | 1146 | ||
| 2461 |
|
1년 전 | 1171 | |
| 2460 | 1년 전 | 759 | ||
| 2459 | 1년 전 | 948 | ||
| 2458 | 1년 전 | 1345 | ||
| 2457 | 1년 전 | 1267 | ||
| 2456 |
|
1년 전 | 771 | |
| 2455 |
블랙캣77
|
1년 전 | 1496 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기