Overlay Кнопка не отображается на IE

Живая сайт- http://uposonghar.com/new-video/Overlay Кнопка не отображается на IE

При наведении на YouTube видео на этой странице вы можете увидеть отображаются кнопки обмена 2. Это не работает на IE.

Это прекрасно работает, когда я устанавливаю iframe src пустой, но не работает, когда я помещаю ссылку на youtube на iframe src. Проверить this- uposonghar.com/test/ie.html

HTML-

<div id="video-container" onmouseover="mouseoverBox1()" onmouseout="mouseoutBox1()"> 
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" style="border:1px solid #F00;background:#063;" width="600" height="400" allowfullscreen="" frameborder="0"></iframe> 
<ul class="share-video-overlay" id="share-video-overlay"> 
<li class="facebook" id="facebook"><a class="shareNew" href="https://www.facebook.com/sharer/sharer.php?u=http://uposonghar.com/new-video/" target="_blank" onclick="return windowpop(this.href, 600, 400);" data-reveal-id="myModal">Facebook</a></li> 
<li class="twitter" id="twitter"><a class="shareNew" href="http://www.twitter.com/share?&text=Check+this+video&amp;url=http://uposonghar.com/new-video/" target="_blank" onclick="return windowpop(this.href, 600, 400);" data-reveal-id="myModal">Tweet</a></li> 
</ul> 
</div>

<script type="text/javascript"> 
function mouseoverBox1(){ 
    var myPara = document.getElementById("share-video-overlay"); 
    myPara.style.display = "block"; 
} 
function mouseoutBox1(){ 
    var myPara = document.getElementById("share-video-overlay"); 
    myPara.style.display = "none"; 
} 
</script>

CSS-

#video-container { 
display: block; 
position: relative; 
width: 600px; 
height: 400px; 
} 
#video-container:after { 
clear: both; 
} 
#share-video-overlay { 
display: none; 
position: absolute; 
left: 0; 
top: 150px; 
} 
.share-video-overlay li { 
margin: 5px 0px 5px 0px; 
}

источник

2014-02-21 arifix

Какую версию IE вы используете? – Siyah

Я тестирую его с помощью IE 7,8,9 – arifix

Если бы я был вами, я должен просто использовать другой css для этой конкретной кнопки только в IE. Как: http://www.thesitewizard.com/css/excludecss.shtml – STP38

Append wmode=transparent параметр в iframe ЦСИ: example

<iframe 
    width="600" 
    height="400" 
    src="//www.youtube.com/embed/-Jkd9GDSyPc?wmode=transparent" 
    frameborder="0" allowfullscreen=""> 
</iframe>

источник

2014-02-21 13:23:47 Careless

Большое вам спасибо! Я ценю. – arifix

Overlay Кнопка не отображается на IE

ответ

Смежные вопросы