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

Can you identify the distinctions between two almost identical HTML emails?

I am currently facing a puzzling situation. There are two emails that I have - one with a sidebar and one without. When the email with the sidebar is received in Gmail, it displays correctly. However, the email without a sidebar loses some formatting, incl ...

htmlemailgmail

JavaScript Class vs Function as Definition

Having trouble locating documentation for this issue. I devised a JavaScript class in the following manner: class Polygon { constructor(height, width) { this.height = height; this.width = width; } area = function() { return this.height ...

javascriptjsfiddle

Is there a quicker method to update the state of an array of objects?

Here is my React state example: const [questionList, setQuestionList] = useState([ { _type: "radio", answer: "", point: "", question: "", options: ["A", "B"], ...

javascriptreactjs

Delete Entries in MongoDB Collection According to Unique User Pairs

I have a collection of messages stored in MongoDB and I need to keep only the latest 500 records for each pair of users. Users are identified by their sentBy and sentTo attributes. /* 1 */ { "_id" : ObjectId("5f1c1b00c62e9b9aafbe1d6c&quo ...

javascriptarraysmongodbsorting

What is the process for establishing a key on the request header to authenticate in Node.js?

I am a novice in the world of nodejs. My current project involves creating a basic server that writes JSON data to a CSV file. However, I have encountered a stumbling block: For authentication purposes, the request header must include an “appKey” para ...

javascriptnode.js

Utilizing Jquery to Pass an Optional Function to Another Function

I am currently working on a function that utilizes AJAX to submit data and then displays a dialog indicating whether the process was successful or not. Everything seems to be functioning smoothly, but I now want to add the capability of passing an addition ...

javascriptjqueryjquery-ui

Is there a way to submit an object to the server without using ajax during form submission?

I have a web application built on the ASP.NET MVC 5 framework. One of the pages in my application utilizes the amazing jQuery-QueryBuilder plugin, allowing users to create filters to refine the dataset results. When a user submits the form by clicking the ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-5

Using NodeJS and ExpressJS to send the HTTP request response back to the client

After creating a website using Angular 2 and setting up node.js as the backend, I successfully established communication between the Angular client and the node.js server. From there, I managed to forward requests to another application via HTTP. My curren ...

javascriptnode.jsexpress

Populate an AngularJS select dropdown with JSON data and automatically pre-select the specified value

I am currently dealing with 2 entities: project and project_types. Each project can have one or multiple project_types associated with it. Using ajax (ng-init), I am retrieving the project data (including its related project_types) and all available proje ...

javascriptangularjsjson

Unexplained disappearance of div element in Vue Router's Navbar

I have been working on integrating a Vue Router into my navbar and everything seemed to be going well. You can check out the code here. The navigation menu I created works perfectly, allowing users to navigate between the home template and about template w ...

javascriptvue.jsvuejs2vue-componentvue-router

What is the rationale behind assigning a random value to the `(keyup)` event in order to update template local variables in Angular2?

To update #box in <p>, I need to give a random value to the (keyup) attribute. Here's an example: <!-- The value on the right of equality sign for (keyup) doesn't matter --> <input #box (keyup)="some_random_value" placeholder ...

javascripttypescriptangular

What is the best way to utilize this resulting value as an input?

I am trying to generate a random number using math.random and use that value in the following script: let bday = Math.floor( Math.random() * (30 - 1 + 1) + 1 ); await test.page.select('select[name="day_select"]',bday); However, I am ...

javascriptnode.js

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

htmlcssgoogle-chromefirefoxflexbox

Material-UI: Avoid onClick event firing when clicking on an element that is overlapped by another in a sticky Table

I have a unique setup in my table where each row, including the header row, begins with a checkbox. This header row has a sticky property. As I scroll through the table, rows start to move behind the header row. If I try to click the checkbox in the heade ...

javascriptreactjsmaterial-ui

Tips for restricting the size of uploaded files or the quantity of files in multer express and effectively managing any errors

I am currently working on a code that requires me to set limits on file size or the number of files that can be uploaded. For instance, I want to restrict users from uploading more than 100 files at once or limit the total upload size to 100 mb. However, ...

javascriptnode.jsexpressmulter

Loop through each object and add them to an array in a file using NodeJS

Currently, I have a scenario where I am executing a POST request inside a for loop function and the response needs to be stored as an object in an array file. Below is the code snippet that I am utilizing: var arrayFile = fs.createWriteStream("arrayFile.j ...

javascriptnode.jsarraysfor-loopobject

Learn how to display JSON data sent from the server on a webpage

I'm just starting out with jquery. I have an api called '/categories' that gives me a json object of categories. The response looks like this: [ { name: "Laptop deals", slug: "laptop-deals", imageURL: "image.jpg", id: 1 }, { name: "Fashion ...

javascriptjqueryjson

What is the most effective way to divide input elements into an array in Angular?

How can I bind an input value to an ng-model as an array? For example, if I enter one, two, three, I want the resulting model to be [ "one","two","three" ]. Currently, this is my approach: <input type="text" ng-model="string" ng-change="convertToArra ...

javascriptmodel-view-controllerangularjs

A guide on retrieving <div> element in a WordPress function PHP file

How can I wrap a div around the output from this code snippet? add_filter( 'the_content', function( $content ) { if (is_singular('cda')) { return get_the_term_list( get_the_ID(), 'cda_cat', 'Product:' ).$con ...

phphtmlwordpressfunction

Is there a way to create a comprehensive list of all the possible winning combinations in a game of 4-Dimensional Connect Four?

Currently, I am developing a 4D Connect Four game using Javascript. The game can be accessed here. My next goal is to incorporate win-checking functionality. To simplify the process and save time, my plan is to pre-create a comprehensive list of all poten ...

javascriptalgorithm