【发布时间】：2013-12-28 00:14:12
【问题描述】：
我已经建立了一个网站，当访问者点击播放按钮时，它会弹出一个 youtube 视频，下面是我的代码。它适用于 iPad、iPhone 和 Mac，但不适用于 PC。有人可以向我解释我做错了什么以及为什么弹出窗口无法打开 PC 上的 youtube 视频吗？该链接仍然有效，因为我可以在新标签中打开视频，只是不会在弹出窗口中自动打开。我已经在 3 台 PC 上测试过，但没有。
谢谢大家。
HTML
<div class="description centerAbsolute">
<h1 class="proximaBold antialiased"><span class="style8">BIG</span>SMILE</h1>
<h2 class="proximaLite antialiased">Cambridge</h2>
<a href="http://youtu.be/krlR2-YGk4sI" target="_blank" class="play clearfix proximaBold relative"><span class="cta floatL">through the eyes of a customer</span><span class="playIco floatL"></span></a>
</div>
CSS
/* --- VIDEO --- */
#main>header>.video>#youtube{opacity: 0; background: rgba(0, 0, 0, 0.6);}
#main>header>.video>#youtube>.close{
width: 40px;
height: 40px;
top: 50%;
left: 0px;
}
#main>header>.video>#youtube>.close>a{
display: block;
width: 40px;
height: 40px;
background: url(../img/close%402x.png) no-repeat center;
background-color: #32ADC3;
background-size: 40px;
vertical-align: bottom;
}
#main>header>.video{width:100%; height:500px; background:url(../img/bg-video.jpg) no- repeat center top; background-size:cover; color:#FFF; }
#main>header>.video>.description{width:700px; margin-top:-185px; margin-left:-350px; text-align:center;}
#main>header>.video>.description>h1{font-size:118px; line-height:118px; margin:0px 0px 0px 0px; letter-spacing:0.12em;}
#main>header>.video>.description>h2{font-size:36px;line-height:35px; margin:15px 0px 0px 0px; letter-spacing:0.12em; -webkit-font-smoothing: antialiased;}
#main>header>.video>.description>.play{text-decoration:none; color:#FFF; display:block; height:70px; width:650px; margin:40px auto 40px auto; background:#32ADC3;}
#main>header>.video>.description>.play>.playIco{ display:block; width:70px; height:70px; background:url(../img/play-ico.png) center no-repeat; border-left:solid 1px #32ADC3;}
#main>header>.video>.description>.play>.cta{ width:578px; font-size:16px; text-transform:uppercase; line-height:72px; letter-spacing:0.25em;-webkit-font-smoothing: antialiased;}
#main>header>.video>.description>.share{ width:140px; margin:auto;}
#main>header>.video>.description>.share>h3{width:136px; font-size:12px; line-height:16px; margin:auto; text-align:center; letter-spacing:0.3em;}
#main>header>.video>.description>.share>h3>.title{ margin:auto 18px auto 18px;}
#main>header>.video>.description>.share>h3>.line{ display:block; width:20px; height:1px; margin-top:5%; border-top:solid 1px #FFF;}
#main>header>.video>.description>.share>ul{ margin-left:-8px; margin-bottom:0px;}
#main>header>.video>.description>.share>ul>li{width:25%;}
#main>header>.video>.description>.share>ul>li>a{ display:block; width:30px; height:30px; border-radius:15px;}
#main>header>.video>.description>.share>ul>li>a:hover{ background-color:#32ADC3;}
#main>header>.video>.description>.share>ul>li>a>img{ margin-top:6px; text-align:center;}
修正：我的问题非常精确，还没有人解决这个问题，所以我知道这实际上是不允许的，但如果你访问 www.mildenhire.com/bigsmile，你会看到那里的网站，并且视频选项会立即加载并且是你看到的第一件事。我不知道为什么它可以在 Mac 和 iOS 上运行，但不能在 PC 上运行。有人可以访问此页面，对其进行故障排除并告诉我我做错了什么吗？这是一个很大的学习曲线。谢谢
【问题讨论】：
标签： html css video youtube popup