0

我在尝试将 yt 视频放入“iframe”时遇到自动播放错误。所以基本上我觉得这是因为 div 但不知道如何防止它。整个想法如下 - 当我点击那个 div 时 - （称为播放），yt 视频可能只是开始而不是点击两次。然而，这里是 html 和 jQuery 代码：

<div class="video">
  <img src="http://i.imgur.com/9EcjYs8.jpg" data-video="http://www.youtube.com/embed/OgAr66JbvtU autoplay=1"/>
    <div class="play"><i class="icon-play"> ► </i></div>
</div>

$(document).ready(function (){

$('.play').click(function () {
    video = '<iframe width="600" height="375" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>';
    $('.video').replaceWith(video);
});
});

PS 我也可以为您提供 .css 代码。干得好：

body{
  background-image: linear-gradient(#99ccff, #fff6e4);
}

html{
  min-height:100%;
}

.video {
    position: relative;
    height: 375px;
    width: 600px;
    background: #73AF96;
    position: absolute;
}
.video img {
    opacity: 0.65;
}
.play {
    opacity:0.5;
    height: 100px;
    width: 140px;
    position: absolute;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    /*Centering*/
    margin: -60px 0 0 -60px;
    left: 50%;
    top: 50%;
    display: block;
    background: #FF9933;
    transition: background-color 1s ease;
    color: white;
}
.play:hover {
    opacity: 0.7;
    background: #FF6600;
}
.icon-play {
    text-align:center;
    line-height: 100px;
    font-size:2.5em;
}

.icon-play:before {
    cursor: pointer;
}

干杯!

4

1 回答 1

0

@Chimoo 已经回答了这个问题： 你需要一个“？” 在 embed/OgAr66JbvtU 和 autoplay=1 之间。

JSB宾雅挖

这就是我们的意思：

<img src="http://i.imgur.com/9EcjYs8.jpg" data-video="http://www.youtube.com/embed/OgAr66JbvtU?autoplay=1"/>

此外，将您的移动<div class="play">...</div>到您的前面<img>并将其添加到您的 CSS 中以获得一些乐趣！:)

.video img {
  opacity: 0.65;  
  transition: 0.4s all;
}
.video div.play:hover + img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}
.play {
  z-index: 1;
}
于 2013-10-26T00:03:28.577 回答