• Locked
1 reply [Last post]
Wed, 2010-11-24 02:05
Maitek
Maitek's picture
Offline
newbie
Last seen: 12 years 27 weeks ago
Timezone: GMT+2
Joined: 2010-11-24
Posts: 1
Points: 2

Hi, my name is Maitek.

I have a problem with my new website that I think might relate to CSS.

First of all so you know what I am talking about. Here is a link to a page on my site:
http://maitek-music.blogspot.com/2010/11/force-sun-flare-original-mix.html

Background:
I have a site that uses embedded youtube player as music player for playing tracks from youtube. The music player is created simply by setting the height of the embedded youtube player (code from youtube) to 25 so that only the bottom part of the player is visible and hence an audio player. (As suggested here.)

The player works fine in this example.

My problem:
This works also perfect on my site, when using Chrome, IE8, or Opera, but with Firefox not. In Firefox the top slice of the video is shown instead of the bottom slice. Same problem with FF v3.6 and latest FF 4 beta.

What did I do?
This was actually working before on my site, with my old style template. Today I changed the style to a new style, using a template. Then I modified the style by editing the CSS. The player worked good also with the new style, until suddenly when I refreshed the page it was all messed up, as described above. Now i have been banging my head for hours trying to get it to work with no result. Not even moving back to the old template works anymore Sad

My conclusions so far.
The problem is only in FF, other browsers works fine. The code works on other sites in FF, and it worked on my site before. Moving back to any of the old templates do not work, even if it worked before. At this moment I am totally clueless.

Can you help me?
So now I am turning my self to you gurus. Has any of you seen something like this before? Do you have any clue of what the problem might be, or what would be causing this? If any of you could help me look into this, I would be most grateful.

Best Regards,

Maitek

Top
Tags:
Fri, 2010-12-24 06:34
#1
Sallana
Sallana's picture
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-5
Joined: 2010-03-31
Posts: 11
Points: 14

Alright, I don't think this

Alright, I don't think this is a CSS problem, I think it's just that firefox crops embedded objects differently than other browsers. And I don't think there's any way around that.

But I do have something that might be a solution for you.

Set a wmode property on the embed code like this:

<object width="300" height="300">    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" /<embed src="http://www.youtube.com/v/tijW_SrCoxs?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" 
          wmode="opaque"
 
width="300" height="300"></embed></object>

That will make it so that other elements can overlap the youtube video. The next step would be to use CSS, take an image and place it overtop the video. If you want I can code you a demo that would show exactly how it would work perfectly.

I just got done using this trick here: http://www.kirschfamilycomputerservices.com/sam/wheresthefairness/#

If you click on "State Your Case" you'll see that the box that pops up overlaps the you-tube video. I really think this would work with a regular, blank box. The problem then is simply some extra space above your makeshift media player.

EDIT:
You could also create a div with the exact dimensions you'd need to place it just over the video part and then you could place content inside of it. This is probably a way more intelligent solution than my previous suggestion.

Top
  • Locked