Div z-index not working when there is video

Question

0.00/5 (No votes)

See more:

Hi Everybody..
I have a small problem. I have a video in my page. And I had a div with position fixed on that page with z-index:1000. The div z-index not working at the position of the video because the video is coming top of the div. So can anyone please tell me whether there is any style for div to rectify this problem??

Thanks in advance.

Posted 29-Oct-12 21:50pm

Venkat_C6

Updated 29-Oct-12 22:21pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Answer 1 · 2012-10-29T22:26:00

Solution 1

It sounds like it's a browser or a css issue. This code below works and opens the video and puts a div over the bottom right 1/4 of it.

XML

<!DOCTYPE html>
<html>
<head>
<style>
#over
{
    display: block;
    position: absolute;
    left: 240px;
    top: 180px;
    border: solid 1px black;
    width: 480px;
    height: 360px;
    background-color: white;
    z-index: 2;
}
</style>
</head>
<body>
    <video style='width: 480px; height: 360px; z-index: 1' src='vid/03.mp4' type='video/mp4'>
        Fallback text
    </video>
    <div id='over'>Some sample content</div>
</body>
</html>

Posted 29-Oct-12 22:26pm

enhzflep

Comments

Venkat_C6 30-Oct-12 4:37am

Thank you for your response.
But Im not using video tag. Im using object with embed tag. For this its not working.

enhzflep 30-Oct-12 4:48am

No worries.
Are you using an swf object? If so, is there any chance you edit your question to include the html you use to include the object?

Venkat_C6 30-Oct-12 5:57am

Hi.. Sorry for the late.. Iam using youtube link..

<object width="650" height="340"><param name="movie" value="http://www.youtube.com/v/r9AnNEgTWkQ&hl=en_US&fs=1&autoplay=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/r9AnNEgTWkQ&hl=en_US&fs=1&autoplay=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="650" height="340"></embed></object>

enhzflep 30-Oct-12 7:50am

Hehe, no worries. Just tried it with the <object> tag - works fine for me using Chrome 22.0.1229.94 m & Opera 12.02. It fails in IE9. It works fine in the default browser on my Android (2.3) phone.

I've got a vague memory of hearing that you can get youtube in two 'formats' - a pre-hmtl5 and a html5 version. I wonder if the difference is flash/native <video> elements.
Just looked, it seems so. Still, I don't know if this would be suitable for your situation.

HTML5 & Youtube

Venkat_C6 30-Oct-12 8:03am

If we keep wmode="opaque" for embed tag means it works fine. But the main problem is if I do like that means we have so many pages in our project to update. So iam checking for the solution with div properties. Why because the div is in the master page. So that we can update in a single page.
Anyway thank you so much for your response..

enhzflep 30-Oct-12 12:38pm

You're welcome. :)

Yeah, so what if you got a whole bunch of pages? You're not going to serve up sub-standard html because someone made a mistake earlier and fixing it seems like too much trouble, are you?

Just get Notepad++ text editor (or anything that allows you to search within files, as opposed to just the current document) and search for the object tag in all of your pages. By the time you've got back from the loo or coffee machine you'll have found every instance of the object tag in every file in the directory and it's children that you specify. Type the new parameter in once, copy it, then select each of the search hits before pasting in the parameter. If it's a changing of parameter, then it's likely to be even quicker, since you'll most likely be able to just use the search and replace option. You could have done over 1000 instances of the fix in less time than I've taken to formulate responses in this thread.

Well, that's how I'd approach it anyway. Hope you find a solution that suits. :)

Venkat_C6 31-Oct-12 7:16am

Hi... At last we did like that only.. But Just I checked whether there is any property to div tag to solve in easy manner. But anyway we have done it.
Thank you so much for the response friend..

enhzflep 31-Oct-12 7:38am

Hey there. Fantastic, glad to hear you were able to solve the problem. Oh, and you're most welcome.
:)