如何实现嵌入网站的YouTube订阅按钮订阅后跳转指定URL

YouTube官方提供的原生订阅按钮没有开放点击后跳转的配置项，而且按钮加载后会被替换为跨域iframe，没法直接给按钮本身绑定事件，用外层容器包裹的方案就能稳定实现效果，全程只需要复制粘贴改2个参数，不需要复杂编程基础。

具体操作步骤 #

• 第一步：引入官方按钮依赖
  把下面这行代码放到你网站页面的</body>闭合标签之前，这行不用改，是官方订阅按钮正常加载必须的：

  <script src="https://apis.google.com/js/platform.js"></script>
  

• 第二步：替换原有按钮代码
  把你之前放订阅按钮位置的旧代码删掉，换成下面这段，只需要改两处标注的参数即可：

  <div style="display: inline-block; position: relative; cursor: pointer;" onclick="setTimeout(function(){window.location.href = '替换成你要跳转的目标页面地址'}, 1200)">
      <!-- 下面是官方订阅按钮本体，替换成你自己的频道ID即可 -->
      <div class="g-ytsubscribe" data-channelid="UCAJZEjGwmVEDN2hmlT-v8Pg" data-layout="default" data-count="default"></div>
  </div>
  

参数调整说明 #

• 频道ID：把data-channelid属性后面引号里的内容，换成你自己的YouTube频道ID，直接去YouTube工作室的高级设置页面就能复制到
• 跳转地址：把外层div点击事件里window.location.href =后面单引号包裹的内容，换成你想要用户点完订阅后跳转的页面地址就行
• 跳转延迟：代码里的1200单位是毫秒，代表点击后等1.2秒再跳转，留够时间让订阅请求发送完成，觉得跳转慢可以调到800，别低于500，不然容易订阅动作还没走完就跳走，导致订阅失败

避坑提醒 #

• 这个方案完全保留官方按钮的所有原生功能，样式、订阅数显示、一键订阅的逻辑都和官方按钮完全一致，不会出兼容问题
• 别直接给带g-ytsubscribe类名的标签绑点击事件，这个标签加载完会被YouTube替换成跨域iframe，你绑的事件会直接失效，外层套容器是目前最省事、稳定性最高的实现方法，不需要写额外的监听代码

内容的提问来源于stack exchange，提问作者John Oszajca