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

2025년 12월 29일 (월) 11:31 기준 최신판

템플릿 사용 예제

== 템플릿 사용 예제 ==
{{동영상스와이퍼
  | https://www.youtube.com/watch?v=MlM1fbaHZTQ&list=RDMlM1fbaHZTQ&start_radio=1
  | https://www.youtube.com/embed/MlM1fbaHZTQ&list-RDMlM1fbaHZTQ&start_radio-1
  | https://www.youtube.com/watch?v-nN6hHjH2O-c
  | https://www.youtube.com/watch?v-nN6hHjH2O-c
}}
* = 가 있을때 아래와 같이
{{동영상스와이퍼
  | 1=https://www.youtube.com/watch?v=MlM1fbaHZTQ&list=RDMlM1fbaHZTQ&start_radio=1
  | 2=https://www.youtube.com/embed/MlM1fbaHZTQ&list-RDMlM1fbaHZTQ&start_radio-1
  | 3=https://www.youtube.com/watch?v-nN6hHjH2O-c
  | 4=https://www.youtube.com/watch?v-nN6hHjH2O-c
}}
1. 위 예제는 동영상 스와이퍼 템플릿 사용 예시입니다. watch?v- 형식의 유튜브 URL을 입력하면 자동으로 embed 형식으로 변환됩니다.
2. 위 예제와 같이 = 가 있으면 노출이 안됩니다. = 가 있을때 순번= 이 필요합니다.

@@ 1번째 줄: / 1번째 줄: @@
 <includeonly>
-  {{#tag:html|
+{{#tag:html|
    <!-- Swiper CDN CSS -->
    <link
@@ 16번째 줄: / 16번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{1|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{1|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 30번째 줄: / 30번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{2|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{2|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 44번째 줄: / 44번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{3|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{3|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 58번째 줄: / 58번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{4|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{4|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 72번째 줄: / 72번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{5|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{5|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 86번째 줄: / 86번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{6|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{6|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 100번째 줄: / 100번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{7|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{7|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 114번째 줄: / 114번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{8|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{8|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 128번째 줄: / 128번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{9|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{9|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 142번째 줄: / 142번째 줄: @@
              width="100%"
              height="100%"
-             src="{{#replace:{{{10|}}}|watch?v-|embed/}}"
+             src="{{#explode:{{#replace:{{#replace:{{{10|}}}|watch?v=|embed/}}|watch?v-|embed/}}|&|0}}"
              frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ 196번째 줄: / 196번째 줄: @@
        });
-       // 모든 iframe에 enablejsapi=1 파라미터 추가
+       // 모든 iframe의 URL에서 & 이후 파라미터 제거 후 enablejsapi=1 파라미터 추가
        document
          .querySelectorAll(".etb-video-swiper iframe")
@@ 202번째 줄: / 202번째 줄: @@
            if (iframe.src) {
              if (!iframe.src.includes("youtu")) return;
-             if (!iframe.src.includes("enablejsapi=1")) {
-               iframe.src =
+             // 기존 URL에서 ?와 & 모두 제거하고 깨끗한 embed URL만 추출
-                iframe.src +
+            let cleanUrl = iframe.src;
-                (iframe.src.includes("?") ? "&" : "?") +
+            const questionIndex = cleanUrl.indexOf("?");
-                "enablejsapi=1";
+            const ampIndex = cleanUrl.indexOf("&");
+            if (questionIndex !== -1) {
+               cleanUrl = cleanUrl.substring(0, questionIndex);
+            } else if (ampIndex !== -1) {
+              cleanUrl = cleanUrl.substring(0, ampIndex);
              }
+            // enablejsapi=1 파라미터 추가
+            iframe.src = cleanUrl + "?enablejsapi=1";
            }
          });
@@ 279번째 줄: / 287번째 줄: @@
      });
    </script>
-  }}
+}}
 </includeonly>
 <noinclude>
-  {{#tag:html|
+{{#tag:html|
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
-  }} == 템플릿 사용 예제 == {{동영상스와이퍼 |
+}}
-  https://www.youtube.com/watch?v-nN6hHjH2O-c |
-  https://www.youtube.com/watch?v-nN6hHjH2O-c |
-  https://www.youtube.com/watch?v-nN6hHjH2O-c }}
-  <pre>
 == 템플릿 사용 예제 ==
 {{동영상스와이퍼
+  | https://www.youtube.com/watch?v=MlM1fbaHZTQ&amp;list=RDMlM1fbaHZTQ&amp;start_radio=1
+  | https://www.youtube.com/embed/MlM1fbaHZTQ&list-RDMlM1fbaHZTQ&start_radio-1
+  | https://www.youtube.com/watch?v-nN6hHjH2O-c
    | https://www.youtube.com/watch?v-nN6hHjH2O-c
+}}
+<pre>
+== 템플릿 사용 예제 ==
+{{동영상스와이퍼
+  | https://www.youtube.com/watch?v=MlM1fbaHZTQ&amp;list=RDMlM1fbaHZTQ&amp;start_radio=1
+  | https://www.youtube.com/embed/MlM1fbaHZTQ&list-RDMlM1fbaHZTQ&start_radio-1
    | https://www.youtube.com/watch?v-nN6hHjH2O-c
    | https://www.youtube.com/watch?v-nN6hHjH2O-c
 }}
+* = 가 있을때 아래와 같이
+{{동영상스와이퍼
+  | 1=https://www.youtube.com/watch?v=MlM1fbaHZTQ&amp;list=RDMlM1fbaHZTQ&amp;start_radio=1
+  | 2=https://www.youtube.com/embed/MlM1fbaHZTQ&list-RDMlM1fbaHZTQ&start_radio-1
+  | 3=https://www.youtube.com/watch?v-nN6hHjH2O-c
+  | 4=https://www.youtube.com/watch?v-nN6hHjH2O-c
+}}
+. 위 예제는 동영상 스와이퍼 템플릿 사용 예시입니다. watch?v- 형식의 유튜브 URL을 입력하면 자동으로 embed 형식으로 변환됩니다.
+. 위 예제와 같이 = 가 있으면 노출이 안됩니다. = 가 있을때 순번= 이 필요합니다.
+</pre>
-</pre
-  >
-  위 예제는 동영상 스와이퍼 템플릿 사용 예시입니다. watch?v- 형식의 유튜브 URL을
-  입력하면 자동으로 embed 형식으로 변환됩니다.
 </noinclude>