时间戳

首页 > 解决方案 > 如何嵌入 Youtube 播放按钮并打开自定义 URL 链接

javascript - 如何嵌入 Youtube 播放按钮并打开自定义 URL 链接

问题描述

我想用 Youtube 播放按钮创建一个我的自定义 URL 链接，当任何人来到我的网站并且当他播放 youtube 视频时，然后打开一个用于外部页面的 url 链接。

标签： javascriptjavaphphtmlios

解决方案

您可以只是模拟外观，然后将整个内容包装在一个链接中。

.wrap {
  width: 100%;
  height: 0px;
  overflow: clip;
}

.wrap .thumb {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6) no-repeat center center;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  background-image: url('https://i.ytimg.com/vi/L_LUpnjgPso/hqdefault.jpg')
}

.wrap .thumb:hover .ytp-large-play-button-bg {
  transition: fill 0.1s cubic-bezier(0, 0, 0.2, 1), fill-opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
  fill: #f00;
  fill-opacity: 1;
}

.wrap .thumb button {
  position: absolute;
  width: 68px;
  height: 48px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
  z-index: 63;
  border: none;
  background-color: transparent;
  padding: 0;
  font-size: 100%;
  cursor: inherit;
  outline: 0;
}
<a href="https://google.com">
  <div class="wrap">
    <div class="thumb">
      <button aria-label="play">
        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
          <path
            class="ytp-large-play-button-bg"
            d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
            fill="#212121"
            fill-opacity="0.8"
          />
          <path d="M 45,24 27,14 27,34" fill="#fff" />
        </svg>
      </button>
    </div>
  </div>
</a>

推荐阅读