Brutalist Video Player

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Futuristic Video Player</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div class="video-container">
    <div class="video-wrapper">
      <video id="video" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
      
      <div class="video-controls">
        <div class="top-controls">
          <div class="title">Big Buck Bunny</div>
          <div class="right-controls">
            <button id="cast-btn" class="control-btn tooltip" data-tooltip="Cast to device">
              <i class="fas fa-cast"></i>
            </button>
            <button id="download-btn" class="control-btn tooltip" data-tooltip="Download">
              <i class="fas fa-download"></i>
            </button>
            <button id="share-btn" class="control-btn tooltip" data-tooltip="Share">
              <i class="fas fa-share-alt"></i>
            </button>
          </div>
        </div>
        
        <div class="center-controls">
          <button id="rewind-btn" class="control-btn">
            <i class="fas fa-backward"></i>
          </button>
          <button id="play-pause-btn" class="control-btn">
            <i class="fas fa-play"></i>
          </button>
          <button id="forward-btn" class="control-btn">
            <i class="fas fa-forward"></i>
          </button>
        </div>
        
        <div class="bottom-controls">
          <div class="progress-container">
            <div class="buffered-progress"></div>
            <div class="playback-progress"></div>
            <input type="range" class="progress-slider" min="0" max="100" value="0" step="0.1">
          </div>
          
          <div class="controls-bar">
            <div class="left-controls">
              <button id="volume-btn" class="control-btn">
                <i class="fas fa-volume-up"></i>
              </button>
              <div class="volume-slider-container">
                <input type="range" class="volume-slider" min="0" max="1" value="1" step="0.1">
              </div>
              <div class="time-display">
                <span id="current-time">0:00</span>
                <span>/</span>
                <span id="duration">0:00</span>
              </div>
            </div>
            
            <div class="right-controls">
              <div class="quality-control dropdown">
                <button class="dropdown-toggle tooltip" data-tooltip="Quality">
                  <i class="fas fa-cog"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-item active" data-quality="auto">Auto</div>
                  <div class="dropdown-item" data-quality="1080p">1080p</div>
                  <div class="dropdown-item" data-quality="720p">720p</div>
                  <div class="dropdown-item" data-quality="480p">480p</div>
                  <div class="dropdown-item" data-quality="360p">360p</div>
                </div>
              </div>
              
              <div class="subtitles-control dropdown">
                <button class="dropdown-toggle tooltip" data-tooltip="Subtitles">
                  <i class="fas fa-closed-captioning"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-item active" data-subtitle="off">Off</div>
                  <div class="dropdown-item" data-subtitle="en">English</div>
                  <div class="dropdown-item" data-subtitle="es">Spanish</div>
                  <div class="dropdown-item" data-subtitle="fr">French</div>
                  <div class="dropdown-item" data-subtitle="de">German</div>
                  <div class="dropdown-item" data-subtitle="ja">Japanese</div>
                </div>
              </div>
              
              <div class="language-control dropdown">
                <button class="dropdown-toggle tooltip" data-tooltip="Audio">
                  <i class="fas fa-language"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-item active" data-language="original">Original</div>
                  <div class="dropdown-item" data-language="en">English</div>
                  <div class="dropdown-item" data-language="es">Spanish</div>
                  <div class="dropdown-item" data-language="fr">French</div>
                  <div class="dropdown-item" data-language="de">German</div>
                  <div class="dropdown-item" data-language="ja">Japanese</div>
                </div>
              </div>
              
              <button id="translate-btn" class="control-btn tooltip" data-tooltip="Live Translation">
                <i class="fas fa-globe"></i>
              </button>
              
              <button id="fullscreen-btn" class="control-btn tooltip" data-tooltip="Fullscreen">
                <i class="fas fa-expand"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div id="share-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal">×</span>
      <h2>Share Video</h2>
      <div class="share-options">
        <button class="share-option" data-platform="facebook">
          <i class="fab fa-facebook"></i> Facebook
        </button>
        <button class="share-option" data-platform="twitter">
          <i class="fab fa-twitter"></i> Twitter
        </button>
        <button class="share-option" data-platform="whatsapp">
          <i class="fab fa-whatsapp"></i> WhatsApp
        </button>
        <button class="share-option" data-platform="email">
          <i class="fas fa-envelope"></i> Email
        </button>
      </div>
      <div class="share-link">
        <input type="text" id="share-url" value="https://example.com/video/big-buck-bunny" readonly>
        <button id="copy-link-btn">Copy</button>
      </div>
    </div>
  </div>
  
  <div id="cast-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal">×</span>
      <h2>Cast to Device</h2>
      <div class="cast-devices">
        <div class="cast-device">
          <i class="fas fa-tv"></i>
          <span>Living Room TV</span>
        </div>
        <div class="cast-device">
          <i class="fas fa-tablet-alt"></i>
          <span>Bedroom Tablet</span>
        </div>
        <div class="cast-device">
          <i class="fas fa-desktop"></i>
          <span>Office Computer</span>
        </div>
        <div class="cast-device">
          <i class="fas fa-hdd"></i>
          <span>Media Center</span>
        </div>
      </div>
    </div>
  </div>
  
  <div id="translate-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal">×</span>
      <h2>Live Translation Settings</h2>
      <div class="translation-options">
        <div class="translation-option">
          <label for="translation-source">Translate from:</label>
          <select id="translation-source">
            <option value="auto">Auto-detect</option>
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="ja">Japanese</option>
          </select>
        </div>
        <div class="translation-option">
          <label for="translation-target">Translate to:</label>
          <select id="translation-target">
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="ja">Japanese</option>
          </select>
        </div>
      </div>
      <button id="apply-translation-btn">Apply</button>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

CSS

:root {
  --primary-color: #00b4ff;
  --secondary-color: #7a29ff;
  --background-color: #0f1923;
  --surface-color: #1a2530;
  --text-color: #ffffff;
  --text-secondary-color: #a0a0a0;
  --accent-color: #ff2970;
  --overlay-color: rgba(0, 0, 0, 0.7);
  --tooltip-background: rgba(26, 37, 48, 0.95);
  --gradient: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container {
  width: 90%;
  max-width: 1200px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background-color: var(--surface-color);
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.video-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.video-wrapper:hover .video-controls,
.video-controls.active {
  opacity: 1;
}

.top-controls, .bottom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.top-controls {
  justify-content: space-between;
}

.title {
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.center-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 2;
}

.control-btn {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 16px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.center-controls .control-btn {
  font-size: 20px;
}

#play-pause-btn {
  background-color: var(--primary-color);
  width: 50px;
  height: 50px;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#play-pause-btn:hover {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

.progress-container {
  position: relative;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}

.buffered-progress, .playback-progress {
  position: absolute;
  height: 100%;
  border-radius: 5px;
  left: 0;
}

.buffered-progress {
  background-color: rgba(255, 255, 255, 0.3);
  width: 70%; /* Example value */
}

.playback-progress {
  background: var(--gradient);
  width: 30%; /* Example value */
}

.progress-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.time-display {
  color: var(--text-secondary-color);
  font-size: 14px;
  margin-left: 15px;
}

.controls-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.left-controls, .right-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.volume-slider-container {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

.volume-slider-container.active {
  width: 80px;
}

.volume-slider {
  width: 80px;
  height: 5px;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: var(--tooltip-background);
  color: var(--text-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip:hover::after {
  opacity: 1;
}

.dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--tooltip-background);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
  margin-bottom: 10px;
}

.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--text-secondary-color);
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

.dropdown-item.active {
  color: var(--primary-color);
  font-weight: 500;
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--surface-color);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary-color);
  transition: color 0.2s ease;
}

.close-modal:hover {
  color: var(--text-color);
}

.modal-content h2 {
  margin-bottom: 20px;
  color: var(--text-color);
  font-weight: 500;
}

/* Share Modal */
.share-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.share-option {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-color);
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.share-option:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.share-link {
  display: flex;
  margin-top: 15px;
}

#share-url {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  border-radius: 6px 0 0 6px;
  outline: none;
}

#copy-link-btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 0 15px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#copy-link-btn:hover {
  background-color: var(--secondary-color);
}

/* Cast Modal */
.cast-devices {
  display: grid;
  gap: 12px;
}

.cast-device {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cast-device:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.cast-device i {
  font-size: 20px;
  color: var(--primary-color);
}

/* Translation Modal */
.translation-options {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.translation-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.translation-option label {
  color: var(--text-secondary-color);
  font-size: 14px;
}

.translation-option select {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--text-color);
  outline: none;
}

#apply-translation-btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s ease;
  margin-top: 10px;
}

#apply-translation-btn:hover {
  background-color: var(--secondary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .video-controls {
    padding: 15px;
  }
  
  .title {
    font-size: 16px;
  }
  
  .control-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  #play-pause-btn {
    width: 46px;
    height: 46px;
  }
  
  .right-controls {
    gap: 10px;
  }
  
  .share-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .video-controls {
    padding: 10px;
  }
  
  .top-controls .right-controls,
  .bottom-controls .right-controls {
    gap: 8px;
  }
  
  .control-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  #play-pause-btn {
    width: 42px;
    height: 42px;
  }
  
  .time-display {
    font-size: 12px;
  }
  
  .modal-content {
    padding: 15px;
  }
}

JS

Brutalist Video Player

Recommended

Portfolio Website HTML Template

Apple Liquid Glass Buttons

CSS Circle Animation Collection

HTML

CSS

JS

Recommended

Portfolio Website HTML Template

Apple Liquid Glass Buttons

CSS Circle Animation Collection

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS