"틀:동영상스와이퍼"의 두 판 사이의 차이

광주문화예술인문스토리플랫폼
이동: 둘러보기, 검색
(새 문서: <includeonly> {{#tag:html| <!-- Swiper CDN CSS --> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> <div class="swiper video-swiper-conta...)
 
 
1번째 줄: 1번째 줄:
−
 
 
<includeonly>
 
<includeonly>
 
{{#tag:html|
 
{{#tag:html|
−
    <!-- Swiper CDN CSS -->
+
  <!-- Swiper CDN CSS -->
−
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
+
  <link
−
    <div class="swiper video-swiper-container etb-video-swiper">
+
    rel="stylesheet"
−
        <div class="swiper-wrapper">
+
    href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
−
{{#if:{{{1|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{1|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
  />
−
{{#if:{{{2|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{2|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
  <div class="swiper video-swiper-container etb-video-swiper">
−
{{#if:{{{3|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{3|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
    <div class="swiper-wrapper">
−
{{#if:{{{4|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{4|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
      {{#if:{{{1|}}}|
−
{{#if:{{{5|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{5|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
      <div class="swiper-slide">
−
{{#if:{{{6|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{6|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
        <div class="iframe-overlay"></div>
−
{{#if:{{{7|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{7|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
        <div class="iframe-wrap">
−
{{#if:{{{8|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{8|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
          <iframe
−
{{#if:{{{9|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{9|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
            width="100%"
−
{{#if:{{{10|}}}|<div class="swiper-slide"><div class="iframe-overlay"></div><div class="iframe-wrap"><iframe width="100%" height="100%" src="{{#replace:{{{10|}}}|v-|v=}}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>|}}
+
            height="100%"
 +
          src="{{#replace:{{{1|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}} {{#if:{{{2|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{2|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}} {{#if:{{{3|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{3|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}} {{#if:{{{4|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{4|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 
         </div>
 
         </div>
−
         <div class="swiper-pagination"></div>
+
      </div>
 +
      |}} {{#if:{{{5|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{5|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}} {{#if:{{{6|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{6|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}} {{#if:{{{7|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{7|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
         </div>
 +
      </div>
 +
      |}} {{#if:{{{8|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{8|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}} {{#if:{{{9|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{9|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}} {{#if:{{{10|}}}|
 +
      <div class="swiper-slide">
 +
        <div class="iframe-overlay"></div>
 +
        <div class="iframe-wrap">
 +
          <iframe
 +
            width="100%"
 +
            height="100%"
 +
          src="{{#replace:{{{10|}}}|-|=}}"
 +
            frameborder="0"
 +
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 +
            allowfullscreen
 +
          ></iframe>
 +
        </div>
 +
      </div>
 +
      |}}
 
     </div>
 
     </div>
 +
    <div class="swiper-pagination"></div>
 +
  </div>
 +
 +
  <!-- Swiper CDN JS -->
 +
  <script>
 +
    // YouTube API 로드
 +
    document.addEventListener('DOMContentLoaded', function() {
 +
      const tag = document.createElement('script');
 +
    tag.src = "https://www.youtube.com/iframe_api";
 +
    const firstScriptTag = document.getElementsByTagName('script')[0];
 +
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
      
 
      
−
     <!-- Swiper CDN JS -->
+
     // Swiper 초기화
−
 
+
    const swiper = new Swiper(".video-swiper-container", {
−
<script>
+
      slidesPerView: 2,
−
  document.addEventListener('DOMContentLoaded', function () {
+
      spaceBetween: 28,
−
  const swiper = new Swiper('.video-swiper-container', {
+
      pagination: {
−
    slidesPerView: 2,
+
        el: ".swiper-pagination",
−
    spaceBetween: 28,
+
        type: "progressbar",
−
    pagination: {
 
−
      el: '.swiper-pagination',
 
−
      type: 'progressbar',
 
−
    },
 
−
    on: {
 
−
      touchStart: () => {
 
−
        document.querySelectorAll('.swiper-slide').forEach(slide => {
 
−
          slide.classList.remove('dragging');
 
−
        });
 
 
       },
 
       },
−
       sliderMove: () => {
+
       on: {
−
        document.querySelectorAll('.swiper-slide').forEach(slide => {
+
        touchStart: () => {
−
          slide.classList.add('dragging');
+
          document.querySelectorAll(".swiper-slide").forEach((slide) => {
−
         });
+
            slide.classList.remove("dragging");
 +
           
 +
          });
 +
          console.log("touchStart")
 +
        },
 +
        sliderMove: () => {
 +
          document.querySelectorAll(".swiper-slide").forEach((slide) => {
 +
            slide.classList.add("dragging");
 +
          });
 +
         },
 +
        touchEnd: () => {
 +
          document.querySelectorAll(".swiper-slide").forEach((slide) => {
 +
            slide.classList.remove("dragging");
 +
          });
 +
        },
 
       },
 
       },
−
      touchEnd: () => {
+
    });
−
        document.querySelectorAll('.swiper-slide').forEach(slide => {
+
   
−
           slide.classList.remove('dragging');
+
    // 모든 iframe에 enablejsapi=1 파라미터 추가
−
         });
+
    document.querySelectorAll('.etb-video-swiper iframe').forEach(iframe => {
 +
      if (iframe.src ) {
 +
        if(!iframe.src.includes('youtu')) return;
 +
        if (!iframe.src.includes('enablejsapi=1')) {
 +
           iframe.src = iframe.src + (iframe.src.includes('?') ? '&' : '?') + 'enablejsapi=1';
 +
         }
 
       }
 
       }
−
     }
+
     });
−
  });
+
   
−
});
+
    // YTPlayer 객체 저장용 맵
−
</script>
+
    const players = new Map();
 +
   
 +
    // YouTube API 준비 완료 시 호출되는 함수
 +
    window.onYouTubeIframeAPIReady = function() {
 +
      document.querySelectorAll('.etb-video-swiper iframe').forEach((iframe, index) => {
 +
        if (iframe.src ) {
 +
          if(!iframe.src.includes('youtu')) return;
 +
          // 유튜브 비디오 ID 추출
 +
          let videoId = '';
 +
          if (iframe.src.includes('youtube.com/embed/')) {
 +
            videoId = iframe.src.split('youtube.com/embed/')[1].split('?')[0];
 +
          } else if (iframe.src.includes('youtu.be/')) {
 +
            videoId = iframe.src.split('youtu.be/')[1].split('?')[0];
 +
          }
 +
         
 +
          if (videoId) {
 +
            // YTPlayer 생성
 +
            const player = new YT.Player(iframe, {
 +
              videoId: videoId,
 +
              events: {
 +
                'onStateChange': function(event) {
 +
                  const overlay = iframe.closest('.swiper-slide').querySelector('.iframe-overlay');
 +
                  // 일시정지(2) 또는 종료(0) 시 overlay 표시
 +
                  if (event.data === YT.PlayerState.PAUSED) {
 +
                    overlay.style.display = 'block';
 +
                    console.log("paused")
 +
                  }
 +
                  if (event.data === YT.PlayerState.ENDED) {
 +
                    overlay.style.display = 'block';
 +
                    console.log("ended")
 +
                  }
 +
                }
 +
              }
 +
            });
 +
            players.set(iframe, player);
 +
          }
 +
        }
 +
      });
 +
    };
 +
   
 +
    // iframe-overlay 클릭 이벤트 처리
 +
    document.querySelectorAll('.iframe-overlay').forEach(overlay => {
 +
      overlay.addEventListener('click', function() {
 +
        const wrap = this.nextElementSibling;
 +
        const iframe = wrap.querySelector('iframe');
 +
        if (iframe) {
 +
          // overlay 숨김
 +
          this.style.display = 'none';
 +
         
 +
          // YTPlayer로 재생
 +
          const player = players.get(iframe);
 +
          if (player ) {
 +
            if(typeof player.playVideo === 'function'){
 +
              player.playVideo();
 +
            }
 +
           
 +
          }
 +
        }
 +
      });
 +
    });
 +
    })
 +
   
 +
  </script>
 
}}
 
}}
 
</includeonly>
 
</includeonly>
 +
 +
 +
<noinclude>
 +
{{#tag:html|
 +
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
 +
}}
 +
 
 +
  == 템플릿 사용 예제 ==
 +
  {{동영상스와이퍼
 +
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
 +
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
 +
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
 +
    }}
 +
 
 +
  <pre>
 +
  == 템플릿 사용 예제 ==
 +
  {{동영상스와이퍼
 +
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
 +
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
 +
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
 +
    }}
 +
 
 +
  </pre>
 +
  위 예제는 광주 충장로에 대한 정보를 표시하는 템플릿 사용 예시입니다. 필요한 필드만 채우면 해당 정보가 표시되고, 값이 없는 필드는 표시되지 않습니다.
 +
 
 +
  </noinclude>

2025년 6월 13일 (금) 17:16 기준 최신판



 == 템플릿 사용 예제 ==
 




  == 템플릿 사용 예제 ==
  {{동영상스와이퍼
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
    | https://www.youtube.com/embed/C1zyvrK3L_c?si-KHo3OXBtGbpEyQQA
    }}
  
  
 위 예제는 광주 충장로에 대한 정보를 표시하는 템플릿 사용 예시입니다. 필요한 필드만 채우면 해당 정보가 표시되고, 값이 없는 필드는 표시되지 않습니다.
원본 주소 "http://prd-gwangju.etribe.co.kr/wiki/index.php?title=틀:동영상스와이퍼&oldid=43757"