I’m having a strange issue with the positioning of a youtube videobar in the the right sidebar, but it only seems to be happening on Chrome and Safari. When one of the video thumbnails in the bar is clicked, it’s supposed to open a player video beside it, but in Chrome and Safari the player video opens elsewhere on the page. It appears to work fine in Firefox and IE7 (only other browsers I’ve been able to test it in so far).
When I take the website’s existing HTML and CSS out of the equation and just test the videobar by inserting it in a blank HTML page (an example) the player opens in the correct position, which is a dynamic position calculated within the javascript of Google’s Search API. I haven’t changed it from the defaults, just copied it locally to the site. The bulk of the changes to Google’s defaults that I’ve made were by placing the #videoBar div that contains the videobar itself within a styled #vidBarholder div with a background image. Both of those divs are then placed within the sidebar left floated containing div.
Any help would be appreciated. I spent 8 hours trying to figure this out yesterday to no avail.
Hi, the google code is inserting the youtube video outisde of any nested elements, and then coordinates are set (top/left) only a few hunderd pixels away…so it’s a few hundred pixels away from the top of the screen. In chrome anyway
It seems the prpoblem lies with the google code Javascript. Firefox is getting a much larger top/left value and as a result it’s positioned correctly.
This isn’t a CSS question though, this should be moved to the JS section. I’ll ask for a move.
Thanks, Ryan, but couldn’t it still be something with a CSS fix? It’s weird because when I test insert the code in a basically blank page with just a big floated right block of text and the styled videobar to the left in a div wrapper, the player appears correctly beside it when clicked – by correctly I mean it doesn’t appear near the top of the browser window but directly beside the bar.
There must be a way to do it without having to change the javascript, but I think there’s a style on the page at makeupandbeautyblog.com that’s causing problems for Safari/Chrome. Maybe a relative positioned element perhaps? I haven’t been able to figure it out.
Also, Google has a wizard that outputs a code snippet that people can insert into their pages, and I believe it’s intended to drop into pages without any changes being made to the javascript. I haven’t changed that code, but I’m trying to place it within a containing div that has a background image applied to it.
This is a complete guess below, but I know it’s javascript because of the values the Javascript is putting out for each browser
I think that since the page has such complicated content, the google code is breaking somewhat? I’m not quite sure as I don’t do JS, but all I know is that the JS values outputted for top/left are different from FF to Chrome. Thus I think JS. I think it worked on a simpler page because of the simpler structure/content
There must be a way to do it without having to change the javascript, but I think there’s a style on the page at makeupandbeautyblog.com that’s causing problems for Safari/Chrome. Maybe a relative positioned element perhaps? I haven’t been able to figure it out.
Not from what I saw, the values were just different, and they were generated via JS
