Video tag with centered image

For a current project, I am in need of rendering a centered image (a play button) at runtime on top of a video based on the UserAgent. If the userAgent is not Firefox, I want to display the image as Firefox has its own playEvent and button on top of the video at the start. Unfortunately, all my previous attempts have been unsuccessful.

I have tried:

  • Adding an image tag inside the video tag and setting the z-index to 10 while giving the video a z-index of 1
  • Wrapping the video tag with a div containing a background image

Are there any alternative methods to achieve this? Please avoid suggesting the use of a poster image as I already have one that needs to be used.

-EDIT-

Code:

<tr>
    <td runat="server" width="680px" height="383px" id="vContainer">
        <video id="player" style="z-index: 1" width="100%" height="100%" title="" controls runat="server">
            <source runat="server" id="ffVideo" type="video/ogg" />
            <source runat="server" id="mp4Video" type="video/mp4" />
        </video>
        <embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px" title="" style="display: none" type="application/mp4" runat="server" />
    </td>
</tr>
javascripthtmlcssvideo

Answer №1

One way to enhance the visibility of a tag is by adjusting its z-index. To see this in action, check out this example: http://jsfiddle.net/65rda3jq/

<div class="cont">
    <div class="img"></div>
     <video id="player" style="z-index: 1" width="100%" height="100%" title="" controls
        runat="server">
        <source runat="server" id="ffVideo" type="video/ogg" />
        <source runat="server" id="mp4Video" type="video/mp4" />
      </video>
      <embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px"
        title="" style="display: none" type="application/mp4" runat="server" />
</div>

CSS 

.cont {
    position:relative;
}

video { position: relative; }
.img {z-index:10; background: #f00; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; }

Answer №2

Check out this code snippet:

HTML Code:

<div class="container">
    <div class="image"><span class='play-icon'></span></div>
     <video id="player" style="z-index: 1" width="100%" height="100%" title="" controls
        runat="server">
        <source runat="server" id="ffVideo" type="video/ogg" />
       <source runat="server" id="mp4Video" type="video/mp4" />
      </video>
      <embed id="playerOld" width="680px" autostart="false" allowfullscreen="true" height="383px"
        title="" style="display: none" type="application/mp4" runat="server" />
</div>

CSS Styles:

.container {
    position:relative;
    background:rgba(42,42,42,0.9);
    border:none;
    color:#fff;
    outline: none;
}
.play-icon{
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
   border-left: 36px solid #fc8b02;
    margin: auto;  
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
}

video { position: relative; }
.image {
    margin: auto;  
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10%;
    height: 16%;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,0.6);
}

http://jsfiddle.net/Grald/kgwvupjm/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilize the power of the ajaxform jQuery plugin to automatically reset form fields

Initially, I'd like to emphasize that this is an original inquiry. My predicament is as follows: I have a chatroom php script where I utilize the ajaxForm jQuery plugin to seamlessly send new messages without having to reload the entire page. Howev ...

javascriptphpjquerychat

Develop a React npm package with essential dependencies included

I have been working on developing a UI library using React ts. As part of this project, I integrated an external library called draft-js into the package. However, when I attempt to implement my library in another project, I keep encountering errors. Despi ...

javascriptreactjstypescriptnpmnpm-package

Track and monitor data modifications in Vue.js

I recently incorporated a Bootstrap Vue Table into my application and wanted to monitor user activity as they navigate through the pages using the pagination feature. Here is where you can find more information on the Bootstrap Vue Table To achieve this, ...

javascriptvue.jsbootstrap-vue

Display the outcomes of two MongoDB queries simultaneously on a single page

As I dive into the world of MongoDB and Node.js/Express, I find myself struggling to fully grasp some of the concepts. Forgive my inexperience, but I haven't been able to locate a clear answer for what I'm trying to achieve. My goal is straight ...

javascriptnode.jsmongodbexpress

Does AngularJS have a callback function for ng-bind-html-unsafe?

Is there a way to efficiently remove certain elements from the DOM after they have been added by this code snippet? <div ng-bind-html-unsafe="whatever"></div> I have created a function to remove these elements, but I am unsure how to trigger ...

javascriptangularjscallbackangularjs-directive

Retrieve data from MongoDB using the find() method results in an empty response, however,

While working on a project to practice my MongoDB skills, I encountered an issue with retrieving all the data from MongoDB. Despite receiving a successful 200 response, I was unable to properly extract all the data. Using Express framework for this task, ...

javascriptnode.jsjsonmongodbexpress

Activate a .click() event on a hyperlink exclusively in mobile view

Currently, I am working on a WordPress website that utilizes a Table of Contents plugin. The plugin simply identifies headings and adds them to the table of contents. I am aiming to achieve a specific functionality on my website (). When the window width ...

javascripthtmlcss

Is it considered safe to display the error message from an AJAX call for security reasons?

When I make my ajax calls, they usually follow this pattern: $.ajax({ type: 'POST', url: '/Controller/DoSomethingSpecial', contentType: 'application/json;', ...

javascriptjqueryajaxsecurityerror-handling

Challenges with implementing @Html.EditorForModel

Currently, I am developing a web application using asp.net's mvc-5 framework. In this project, I have implemented the following model class: public class Details4 { [HiddenInput(DisplayValue=false)] public string RESOURCENAME { se ...

cssasp.netrazorhtml-helperasp.net-mvc-5

How come I am unable to terminate this Angular HTTP request?

I've been trying to implement a solution for canceling HTTP requests in AngularJS by referring to this Stack Overflow post. Here's the code snippet I'm using: var canceller = $q.defer(); $timeout(function() { canceller.resolve(); alert ...

javascriptangularjspromise

What is the best way to create several sets of a numerical field and a checkbox? (checkbox will deactivate a specific number field)

I'm having an issue with generating multiple pairs of a number field and a checkbox. When I click the checkbox, it should disable the number field. However, only the first pair seems to be working. Can anyone lend a hand? Here's the code snippe ...

javascriptphpjqueryangularjs

What is the process for submitting a form on consecutive URLs?

I have a form that requires input for settings and includes two buttons: one to save the form and another to both save and execute the settings. <form method="post" action="/settings/{{id}}/save"> <!-- input fields --> ...

javascripthtmljquery

Utilize/Absolve/Add a Prefix to angular material scss styles

Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...

cssangularsassangular-material

How can I implement a scroll bar in Angular?

I am facing an issue with my dialog box where the expansion panel on the left side of the column is causing Item 3 to go missing or appear underneath the left column when I expand the last header. I am looking for a solution to add a scroll bar so that it ...

htmlcssangulartypescriptexpansion

How PHP Processes Fragment Identifiers within URLs

Looking for some advice from the community on a tricky situation I'm facing. Here's the issue at hand: I have developed a website with dynamic content pulled via AJAX and displayed using JS. To allow direct links to my content, I modify the frag ...

phpjavascriptfacebookmeta-tagsfragment-identifier

Bootstrap table with set width and text wrapping in td elements

I'm currently working with Bootstrap CSS to create a fixed-length table where the contents inside each cell (td) can wrap into multiple lines if necessary. Below is a snippet of my code that's not functioning as intended. The content within the ...

htmlcssangular-ui-bootstrapbootstrap-4

Safari 15.6.1 does not support background video playback in Next.js

Currently using Safari version 15.6.1 for a small website project, I have encountered an issue where the video appears frozen with an arrow in the middle. Oddly enough, this problem only occurs on Safari as both Chrome and Firefox display the code correctl ...

javascripthtmlnext.jssafari

Generate a randomly structured 2D array called "Array" using JavaScript

Can anyone help me with extracting a random array from a 2D named array? I've tried several solutions but none of them seem to work. var sites = []; sites['apple'] = [ 'green' , 'red' , 'blue' ]; sites['o ...

javascriptarraysrandom2d

Div element positioned outside of another div element

I hate to bug you with more css issues, but I'm really struggling with this one. The problem I'm facing is that a sub div is overflowing the boundaries of its parent div. I tried using: display: inline-block;` but then the outer div goes haywir ...

htmlcss

Tips for transferring a jQuery array to PHP

I am encountering an issue when trying to send a jQuery array to PHP. Initially, I have one form in HTML and upon clicking 'add', I end up with two forms. Afterwards, I input data into the form which is then stored in a jQuery array. However, I a ...

javascriptphpjqueryhtmlajax