가로는 1줄에 3개씩 보이게 함.

dalnim · Sep 6, 2024 · 360bc24 · 360bc24
1 parent c3151e7
commit 360bc24
Showing 1 changed file with 53 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -302,10 +302,10 @@ <h2 class="display-3 fw-bold text-dark mb-5 text-center awesome_sc" data-aos="fa
                 <h3>First YouTube Video</h3>
                 <div class="video-container">
                     <iframe
-                        src="https://www.youtube.com/embed/IPAV7AS4qzw?playlist=IPAV7AS4qzw&loop=1&autoplay=1&mute=1"
+                        src="https://www.youtube.com/embed/IPAV7AS4qzw?playlist=IPAV7AS4qzw&loop=1&mute=1"
                         title="YouTube video player"
                         frameborder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         allowfullscreen>
                     </iframe>
                 </div>
@@ -316,7 +316,20 @@ <h3>First YouTube Video</h3>
                 <h3>Second YouTube Video</h3>
                 <div class="video-container">
                     <iframe
-                        src="https://www.youtube.com/embed/IPAV7AS4qzw?playlist=IPAV7AS4qzw&loop=1&autoplay=1&mute=1"
+                        src="https://www.youtube.com/embed/IPAV7AS4qzw?playlist=IPAV7AS4qzw&loop=1&mute=1"
+                        title="YouTube video player"
+                        frameborder="0"
+                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen>
+                    </iframe>
+                </div>
+            </div>
+			<!-- First YouTube Video Column -->
+            <div class="col-12 col-lg-6 text-center" id="youtube" data-aos="fade-left">
+                <h3>First YouTube Video2</h3>
+                <div class="video-container">
+                    <iframe
+                        src="https://www.youtube.com/embed/IPAV7AS4qzw?playlist=IPAV7AS4qzw&loop=1&mute=1"
                         title="YouTube video player"
                         frameborder="0"
                         allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -325,29 +338,58 @@ <h3>Second YouTube Video</h3>
                 </div>
             </div>
 
-            <!-- Vertical YouTube Videos -->
+            <!-- Second YouTube Video Column -->
             <div class="col-12 col-lg-6 text-center" id="youtube" data-aos="fade-left">
-                <h3>Vertical YouTube Video1</h3>
+                <h3>Second YouTube Video2</h3>
+                <div class="video-container">
+                    <iframe
+                        src="https://www.youtube.com/embed/IPAV7AS4qzw?playlist=IPAV7AS4qzw&loop=1&mute=1"
+                        title="YouTube video player"
+                        frameborder="0"
+                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen>
+                    </iframe>
+                </div>
+            </div>
+
+
+            <!-- Vertical YouTube Videos -->
+            <div class="col-12 col-md-4 text-center" id="youtube" data-aos="fade-left">
+                <h3>Vertical  Video1</h3>
                 <div class="vertical-video-container">
                     <iframe
-                        src="https://www.youtube.com/embed/FLd-0YOnpUg?autoplay=1&loop=1&mute=1&playlist=FLd-0YOnpUg"
+                        src="https://www.youtube.com/embed/FLd-0YOnpUg?loop=1&mute=1&playlist=FLd-0YOnpUg"
                         title="GirlGang #dance #shorts #trend #girls #trio #matching #reveal #916house"
                         frameborder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                         referrerpolicy="strict-origin-when-cross-origin"
                         allowfullscreen>
                     </iframe>
                 </div>
             </div>
 
-            <div class="col-12 col-lg-6 text-center" id="youtube" data-aos="fade-left">
-                <h3>Vertical YouTube Video2</h3>
+            <div class="col-12 col-md-4 text-center" id="youtube" data-aos="fade-left">
+                <h3>Vertical  Video2</h3>
+                <div class="vertical-video-container">
+                    <iframe
+                        src="https://www.youtube.com/embed/FLd-0YOnpUg?loop=1&mute=1&playlist=FLd-0YOnpUg"
+                        title="GirlGang #dance #shorts #trend #girls #trio #matching #reveal #916house"
+                        frameborder="0"
+                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        referrerpolicy="strict-origin-when-cross-origin"
+                        allowfullscreen>
+                    </iframe>
+                </div>
+            </div>
+
+            <div class="col-12 col-md-4 text-center" id="youtube" data-aos="fade-left">
+                <h3>Vertical  Video3</h3>
                 <div class="vertical-video-container">
                     <iframe
-                        src="https://www.youtube.com/embed/FLd-0YOnpUg?autoplay=1&loop=1&mute=1&playlist=FLd-0YOnpUg"
+                        src="https://www.youtube.com/embed/FLd-0YOnpUg?loop=1&mute=1&playlist=FLd-0YOnpUg"
                         title="GirlGang #dance #shorts #trend #girls #trio #matching #reveal #916house"
                         frameborder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                         referrerpolicy="strict-origin-when-cross-origin"
                         allowfullscreen>
                     </iframe>