Member Avatar for titusnainggolan

Hello all,

I want to embed video in my website with code below,

<div id="video"><embed src="video/hari_ini_sakit.mp4" width="200" height="175"></embed></div>

But I want to hide the tracking/control bar in video area. I need your help. Thanks

  • 2 Contributors
  • 1 Reply
  • 116 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

wants the player chrome removed; pointed at a parameter on the embedded player, which can work with some legacy players. For a more reliable and future‑proof approach, switch to the HTML5 video element or a small JS player so you control the UI and accessibility.

A simple pattern: place the native video element without the browser UI and provide a single accessible overlay control (so users still have play/pause and keyboard access). The example below shows the structure, a tiny script to toggle playback, and minimal styling — it keeps the built‑in UI hidden while letting you offer your own button.

<div class="video-wrap" style="position:relative;max-width:240px;">
  <video id="player" poster="poster.jpg" playsinline muted preload="metadata">
    <source src="videos/example.mp4" type="video/mp4">
    <source src="videos/example.webm" type="video/webm">
    Your browser does not support HTML5 video.
  </video>
  <button class="play-overlay" aria-label="Play video" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);">Play</button>
</div>

<script>
  const v = document.getElementById('player');
  const btn = document.querySelector('.play-overlay');
  btn.addEventListener('click', () => {
    if (v.paused) { v.play(); btn.style.display = 'none'; }
    else { v.pause(); btn.style.display = ''; }
  });
</script>

Notes and caveats:

  • Hiding the native controls removes built‑in keyboard and screen‑reader behaviors. Provide accessible alternatives (keyboard handlers, ARIA labels).
  • Autoplay with sound is blocked by many browsers; muted autoplay is allowed in most cases.
  • Vendor hacks that try to hide browser controls with pseudo‑elements are brittle — prefer custom controls or a tested player library.
  • For production, consider a maintained player (for example, Video.js or Plyr) which gives consistent UI options and accessibility support.

For reference on the element and accessibility details, see the HTML5 video docs: HTML5 video element.

Member Avatar for Arkinder

Include the controls parameter.

<div id="video"><embed src="video/hari_ini_sakit.mp4" width="200" height="175" controls="0"></embed></div>

Regards
Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.