jquery opacity not working with safari browser

Question

The code line $('#iframe-youtube').css("opacity", "0"); below works on every browser except Safari. The rest of the code works at every browser include Safari. By the way I have also tried $('#iframe-youtube').animate({opacity: '0'},0) but it didnt work neither.

$('#bg').fadeOut(500);
$('#hand-iphone').animate({opacity: '0', bottom: '-5px'},0);
$('#hand2-iphone').animate({opacity: '0'},0);
$('#iframe-youtube').css("opacity", "0");
$('#hand-iphone2').show().animate({opacity: '0', bottom: '-5px' , left: '95px'},0);
$('#hand2-iphone2').show().animate({opacity: '0'},0);
$('.roundabout-holder').show().animate({opacity: '0'},0);
$('#boni-text').show().animate({opacity: '0'},0);           
$('#hand-iphone2').delay(200).animate({opacity: '1', bottom: '0px', left:'50px'},500);                  
$('#hand2-iphone2').delay(2000).animate({opacity: '1'},0);
$('.roundabout-holder').animate({opacity: '1'},500);
$('#boni-text').animate({opacity: '1'},500);

Any errors reported in the developer tools' JavaScript console? — David Thomas, Dec 10 '12 at 22:48
Try passing a number instead of a string as in `.css('opacity', 0)` — elclanrs, Dec 10 '12 at 22:49
Try using single quotes. What is the rendered markup in Safari? And what version of Safari/ — viperguynaz, Dec 10 '12 at 22:53
Are you able to use `$('#iframe-youtube').css("display", "none");` instead? — Belladonna, Dec 10 '12 at 22:55
@DavidThomas I am using windows, I couldnt find any javascript console for Safari and tried to get as extension, could not connect to server (?) — mctuna, Dec 10 '12 at 22:58
@user1721691: Have a read of [Safari's Developer Tools Guide](http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html). It will, probably, be helpful. — David Thomas, Dec 10 '12 at 23:00
Try on MacOS, it could be some Windows issue with Safari. Apple does not support the Win version anymore AFAIK, and nobody uses Safari on Windows anyway. — elclanrs, Dec 10 '12 at 23:04
I have tried everything you offered but no way, thanks anyway. — mctuna, Dec 10 '12 at 23:06

score 1 · Accepted Answer · edited May 23 '17 at 12:12

Add ?wmode=opaque to the end of your youtube link in the iframe.

Example:

HTML

<div id="iframe-youtube">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/bZqnqH9s1jk?wmode=opaque" frameborder="0"></iframe>
</div>

Javascript

$('#iframe-youtube').css("opacity", 0);

Demo

Light reading

jquery opacity not working with safari browser

1 Answers1