Member Avatar for SimonIoa

Hello i want to show html5 video with content over it . Like background image. The whole div html5 video must be of 400px height

        <div style="height: 400px">
         <video controls poster="{{item.media_pic}}">
        <source src="{{item.image_path}}" type="video/webm" />
        <source src="{{item.image_path}}" type="video/mp4">
        <source src="{{item.image_path}}" type="video/ogg">
        Your browser does not support HTML5 video.
      </video>
      <ion-row>
        <ion-col col-4>
          some text
        </ion-col>
        <ion-col col-8>
        button         
        </ion-col>
      </ion-row>
    </div>
  • 4 Contributors
  • 3 Replies
  • 2K Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by Anjum_1

Dani AI

Generated

You can treat the video like a background by absolutely positioning it inside a fixed-height container, then stacking your Ionic grid on top. Also remove controls and use muted autoplay playsinline loop so it behaves like a true background across mobile browsers; on iPhone, missing playsinline will push the video fullscreen, and muted autoplay is what reliably starts it without a tap. (webkit.org)

<div class="hero">
  <video class="hero__video"
         autoplay muted loop playsinline preload="metadata"
         poster="{{item.media_pic}}" aria-hidden="true">
    <source src="{{item.mp4_path}}" type="video/mp4">
    <source src="{{item.webm_path}}" type="video/webm">
  </video>

  <div class="hero__overlay">
    <!-- put your ion-row / ion-col and buttons here -->
  </div>
</div>
.hero { position: relative; height: 400px; overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none; }
.hero__overlay { position: relative; z-index: 1; color: #fff; }

Notes:

  • object-fit: cover makes the video fill the 400px box while keeping its aspect ratio; tweak cropping with object-position. (developer.mozilla.org)
  • Keep clickable UI above the video; pointer-events: none on the video lets taps reach your buttons. If you need to interact with the video, remove that line.
  • Serve real files per <source> (e.g., .mp4 and .webm) with correct MIME types; do not reuse the same path for each type.
  • Respect users who prefer less motion: swap the video for the poster with a CSS media query.
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero { background: url("{{item.media_pic}}") center/cover no-repeat; }
}

That implements the overlay idea mentioned and the pure-CSS background approach pointed to, but in a way that works reliably on mobile. (developer.mozilla.org)

Recommended Answers

All 3 Replies

Member Avatar for rproffitt

I'm thinking of an example (link to follow) where you add video width="320" height="240" as you see fit as to size.
Then look at for your text overlay.

Member Avatar for Purvi_1

Hello ! please refer following link may this will help you.

Member Avatar for Anjum_1

Yes, you can easily achieve this by placing the HTML5 video inside a 400px-high container and positioning the content absolutely over the video. Use object-fit: cover so the video fills the entire area without stretching. This approach works well for hero sections or tools such as a , where you can place a heading, description, or button directly over the video.

Edited by Anjum_1
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.