Skip to main content

Youtube Playlist

Simple and Responsive Youtube Playlist Without API

                
                  <!-- YOUTUBE PLAYLIST -->
                  <div class="col-12 px-lg-3 bg-dark">
                    <div class="row">
                      <!-- PLAYLIST TITLE -->
                      <div class="col-12 px-3">
                        <div class="my-3">
                            <h4 class="text-white">Hot News Video</h4>
                        </div>
                      </div>
                      <!-- THE YOUTUBE PLAYER -->
                      <div class="col-md-8 px-3 video-full pb-3">
                        <iframe id="vid_frame" src="https://www.youtube.com/embed/wSA_nKSxfFE?rel=0&showinfo=0&autohide=1" width="700" height="400"></iframe>
                      </div>
                      <!-- THE PLAYLIST -->
                      <div class="col-md-4 px-3">
                        <div class="py-1 px-3 bg-primary">
                          <h4 class="h5 mt-3 text-white">Playlist Video</h4>
                          <p class="text-white">Most popular news video in the week</p>
                        </div>
                        <ol class="playlist-title list-unstyled">
                          <li class="active">
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/wSA_nKSxfFE?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/wSA_nKSxfFE/default.jpg" alt="2019 MotoGP Winter Test Sepang"></span>
                              <div class="video-title">2019 MotoGP Winter Test Sepang</div>
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/1zh0hed7KHY?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/1zh0hed7KHY/default.jpg" alt="2018 Kawasaki Ninja 650 review"></span>
                              <div class="video-title">2018 Kawasaki Ninja 650 review</div>
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/3CXk5gPj5UI?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/3CXk5gPj5UI/default.jpg" alt="MotoGp Sepang test 2017 PURE SOUND"></span>
                              <div class="video-title">MotoGp Sepang test 2017 PURE SOUND</div>
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/AkmR5hPvifI?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/AkmR5hPvifI/default.jpg" alt="MotoGP 2018 Crashes Video"></span>
                              <div class="video-title">MotoGP 2018 Crashes Video</div>
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/8huz4ussEBc?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/8huz4ussEBc/default.jpg" alt="MOTOGP 2019 LINEUP Riders and New Team"></span>
                              <div class="video-title">MOTOGP 2019 LINEUP Riders and New Team</div>
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/Qax69vNI3nw?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/Qax69vNI3nw/default.jpg" alt="2019 Repsol Honda Team Presentation"></span>
                              <div class="video-title">2019 Repsol Honda Team Presentation</div>
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/DHWqapejxpE?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/DHWqapejxpE/default.jpg" alt="2019 Ducati Team presentation"></span>
                              <div class="video-title">2019 Ducati Team presentation</div>
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/6NADNUXiDVU?autoplay=1&rel=0&showinfo=0&autohide=1'">
                              <span class="video-thumb"><img width=72 src="https://img.youtube.com/vi/6NADNUXiDVU/default.jpg" alt="MotoGP Valencia 2019 Test Day 2"></span>
                              <div class="video-title">MotoGP Valencia 2019 Test Day 2</div>
                            </a>
                          </li>
                        </ol>
                      </div>
                    </div>
                    <!-- END YOUTUBE PLAYLIST -->
                  </div>
                  <!-- END YOUTUBE PLAYLIST -->