Member Avatar for Dumb Fish

Hi, I need ask how to embed the video to the website before entry the Home or Main Menu page?

  • 2 Contributors
  • 10 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

A concise, practical approach to the problem raised by (show a video before entering the site that only plays when clicked): prefer a lightweight poster/placeholder that does not load the video file until the user intentionally starts playback. mentioned iframe and direct embeds; if the source is a third-party host use their embed API, but for a self-hosted file a lazy-init HTML5 strategy gives the best control over bandwidth, autoplay behavior and accessibility.

A minimal pattern: put a clickable placeholder with a poster image and create the actual video element only when the user clicks. That avoids preloading large files and guarantees the video will not run unless clicked.

<div class="intro-placeholder" data-src="intro.mp4" role="button" tabindex="0" aria-label="Play intro">
  <img src="intro-poster.jpg" alt="Intro preview">
  <span class="play">Play</span>
</div>

<script>
document.querySelectorAll('.intro-placeholder').forEach(function(el){
  function activate(){
    var src = el.dataset.src;
    var v = document.createElement('video');
    v.setAttribute('controls','');
    v.setAttribute('playsinline','');
    v.preload = 'none';
    v.src = src;
    el.innerHTML = '';
    el.appendChild(v);
    v.play().catch(function(){ /* user gesture required or playback blocked */ });
    el.removeEventListener('click', activate);
  }
  el.addEventListener('click', activate);
  el.addEventListener('keydown', function(e){ if(e.key === 'Enter' || e.key === ' ') activate(); });
});
</script>

Troubleshooting and best practices: serve correct MIME types and enable range requests so seeking works; provide multiple encodings (H.264 MP4 and WebM) for broader browser support or use adaptive streaming (HLS/DASH) for large files; add a visible skip/close control for accessibility and SEO (heavy video on entry can hurt load time); remember mobile autoplay is restricted — user interaction is the reliable trigger. For legacy use of object/embed, prefer the HTML5 video element or a hosted player.

More reference: MDN's documentation on the HTML5 video element is a good, up-to-date resource (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).

Recommended Answers

All 10 Replies

Member Avatar for lps

Are you wish to use iframe to do it? If you do,you can use

<iframe width="100%" height="300px" src="http://www.youtube.com"/>
Member Avatar for Dumb Fish

If i use the video not from the website..how to write that..?

Member Avatar for lps

That's a lot more easier. Just put them in same folder and have the src link redirect to your video link. Example:

<iframe width="100%" height="300px" src="example_video.mp4"/>
Member Avatar for lps

Moreover, if you want some effect, try search and implement the lightbox effect. My recommendation is pirobox.

Member Avatar for Dumb Fish

If I just wan normal ( no need the iframe) just put height and width in front.?
need use Object and embed tag???

Member Avatar for Dumb Fish

Sorry got one more question....i just want to upload a video player. If i wan to watch that video then i will click that. If not, the video won't run....?

Member Avatar for lps

If you mean direct embed video, you should probably refer this page. It enclosed with some API which you should go through such as autostart etc http://www.tizag.com/htmlT/htmlvideocodes.php
but this require some plugin to play the video. Or a simple code such as

<video width="320" height="240" controls="controls">
  <source src="example_video.mp4" type="video/mp4" />
</video>

will do it but it cannot be disable sadly.

Edited by lps because: n/a
Member Avatar for Dumb Fish

ooo....i try first....thanks ya...

Member Avatar for Dumb Fish

if i using <object> tag...how to do the coding..?because i saw some code is start from the object tag...

Member Avatar for lps

No offence, but you should probably do some research first instead of posting your article here. This look like someone skip their work and ask around for other to do their work. For your information, the correct way of asking question is show us what you done and plenty of us are happy to help you debugging. Ok, back to main topic, please refer here: http://www.w3schools.com/html/html_object.asp

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.