김철용

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

2041987161_1627838424.0596.png

감사합니다.^^

 

 


 

첨부파일

|

댓글 2개

수고하셨습니다. 슬라이딩이나 페이드가 되는 갤러리에 넣었으면 금상첨화였을 거에요.
올려주셔서 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
21-08-26 조회 7,238
21-08-25 조회 7,606
21-08-25 조회 8,281
21-08-25 조회 6,849
21-08-24 조회 9,243
21-08-24 조회 8,437
21-08-23 조회 9,038
21-08-23 조회 7,293
21-08-23 조회 7,037
21-08-21 조회 7,496
21-08-18 조회 7,995
21-08-17 조회 8,465
21-08-17 조회 7,539
21-08-14 조회 8,400
21-08-14 조회 1.1만
21-08-11 조회 7,934
21-08-10 조회 9,319
21-08-07 조회 6,965
21-08-05 조회 8,947
21-08-05 조회 8,640
21-08-04 조회 7,480
21-08-04 조회 8,157
21-08-04 조회 7,410
21-08-04 조회 7,292
21-08-02 조회 8,474
21-08-02 조회 7,475
21-08-01 조회 7,031
21-07-31 조회 7,349
21-07-30 조회 6,899
21-07-29 조회 9,465