Question

我在youtube缩略图上找到了一个很棒的覆盖播放按钮代码我想在点击此按钮后显示我的嵌入式视频

以下是代码，请告诉我放置iframe的位置

.unstarted-mode:not(.playing-mode) .ytp-cued-thumbnail-overlay:not([aria-hidden=true]), .ended-mode .ytp-cued-thumbnail-overlay:not([aria-hidden=true]) {
    cursor: pointer;
}
.ytp-thumbnail-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 12;
    background-position: center;
    background-repeat: no-repeat;
    -moz-transition: opacity .5s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: opacity .5s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity .5s cubic-bezier(0.0,0.0,0.2,1);
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ytp-button:not([aria-disabled=true]):not([disabled]):not([aria-hidden=true]) {
    cursor: pointer;
}
.ytp-small-mode .ytp-large-play-button {
    width: 42px;
    height: 30px;
    margin-left: -21px;
    margin-top: -15px;
}
.ytp-large-play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 48px;
    margin-left: -34px;
    margin-top: -24px;
    -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}
.ytp-button {
    border: none;
    background-color: transparent;
    padding: 0;
    color: inherit;
    text-align: inherit;
    font-size: 100%;
    font-family: inherit;
    cursor: default;
    line-height: inherit;
}

.html5-video-player svg {
    pointer-events: none;
}
.ytp-large-play-button-bg {
    -moz-transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1);
    -webkit-transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1);
    transition: fill .1s cubic-bezier(0.4,0.0,1,1),fill-opacity .1s cubic-bezier(0.4,0.0,1,1);
    fill: #1f1f1f;
    fill-opacity: .81;
}
.ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg, .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg {
    -moz-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
    transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
    fill: #cc181e;
    fill-opacity: 1;
}

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" data-layer="4" style="background-image: url(&quot;https://i.ytimg.com/vi/FKWwdQu6_ok/hqdefault.jpg&quot;);"><button class="ytp-large-play-button ytp-button" aria-label="İzle: Hillbilly Hip Hop"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.81"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg></button></div>

Answer 1

如果我理解你的问题，你想在图像点击上播放youtube视频，图像应该在视频上。以下是您可以执行此操作的示例 - Play Video

<强> HTML

<div id="youtube-video">
    <a id="play-video" href="#" style="background-image: url('http://devfloat.com/wp-content/uploads/2014/01/beawesome-wallpaper.jpg');"></a>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/zKIMNgYrzoE" frameborder="0" allowfullscreen></iframe>
</div>

<强> CSS

 #youtube-video {
  position: relative;
  display: inline-block;
}
#play-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<强>的jQuery

$('#play-video').on('click', function(ev) {
    $(this).hide();
    $("#video")[0].src += "?rel=0&autoplay=1";
});

如何在点击图片时开始播放嵌入式iframe视频

1 个答案: