Ngorei NexaUI

<video class="nx-video" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

<video class="nx-video nx-video-responsive" controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

<video class="nx-video" controls poster="https://picsum.photos/800/400">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

<video class="nx-video" autoplay muted>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

<video class="nx-video" controls muted>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

<video class="nx-video" controls loop>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

<div class="video-custom-controls">
  <video class="nx-video" id="customVideo">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Browser Anda tidak mendukung tag video.
  </video>
  <div class="custom-controls">
    <button class="nx-btn" onclick="playPause()">
      <i class="fas fa-play"></i>
    </button>
    <button class="nx-btn" onclick="muteUnmute()">
      <i class="fas fa-volume-up"></i>
    </button>
    <input type="range" class="timeline" value="0">
  </div>
</div>

<div class="video-wrapper">
  <video class="nx-video" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Browser Anda tidak mendukung tag video.
  </video>
  <div class="video-overlay">
    <h3>Judul Video</h3>
    <p>Deskripsi video</p>
  </div>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video"
    src="https://www.youtube.com/embed/tgbNymZ7vqY"
    title="YouTube video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video nx-video-responsive"
    src="https://www.youtube.com/embed/tgbNymZ7vqY"
    title="YouTube video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video"
    src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1&controls=0&loop=1&playlist=tgbNymZ7vqY"
    title="YouTube video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video"
    src="https://www.youtube.com/embed/videoseries?list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8"
    title="YouTube video playlist"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

<div class="video-bg-container">
  <video class="nx-video nx-video-background" autoplay muted loop>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="video-bg-content">
    <h3>Teks di Atas Video</h3>
    <p>Konten dapat ditampilkan di atas video background</p>
  </div>
</div>;

<div class="video-pip-container">
  <video class="nx-video" id="pipVideo" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <button class="nx-btn" onclick="togglePiP()">Picture-in-Picture</button>
</div>

<div class="video-playlist">
  <video class="nx-video" id="playlistVideo" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="playlist-controls">
    <button class="nx-btn" onclick="prevVideo()">Previous</button>
    <button class="nx-btn" onclick="nextVideo()">Next</button>
  </div>
  <ul class="playlist-items">
    <li class="active">Video 1</li>
    <li>Video 2</li>
    <li>Video 3</li>
  </ul>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video"
    src="https://player.vimeo.com/video/824804225"
    frameborder="0"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video nx-video-responsive"
    src="https://player.vimeo.com/video/824804225"
    title="Vimeo video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video"
    src="https://player.vimeo.com/video/824804225?autoplay=1&mute=1&controls=0&loop=1"
    title="Vimeo video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

<div class="video-wrapper">
  <iframe 
    class="nx-video"
    src="https://player.vimeo.com/video/824804225?list=824804225"
    title="Vimeo video playlist"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>