Youtube订阅——解决在弹窗内使用Youtube订阅按钮高

小提示：您能找到这篇{Youtube订阅——解决在弹窗内使用Youtube订阅按钮高}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的Youtube订阅——解决在弹窗内使用Youtube订阅按钮高内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

< ">背景：公司网站业务在做海外营销网站，为了配合营销工作，前端总要在各种地方添加各种社媒订阅（摊手.jpg)；最近遇到的是在弹窗内展示公司的Youtube账号的订阅按钮。

< ">理想：我想使用的例子是这样的：

< ">现状：但是当我实际使用的时候，却只显示了一半，如下图：

< ">解决问题思路：

< ">1. 起初，我以为是加载的外部js先执行的原因，所以将script加了defer属性（延迟执行），发现没有任何效果;

< ">2. 其次，还是老老实实去查了官方文档https://developers.google.com/youtube/subscribe/reference：

< ">官方api提供了很多功能的go/render方法，动态渲染订阅按钮或其他功能：

< ">3. 最后我在bootstrap弹窗加载完的钩子函数中调用了gapi.ytsubscribe.render方法，实现了功能，代码如下：

< "><!--#modal-sample-lg--><script src="https://apis.goo新品药品gle.com/js/platform.js"></script><div id="yt-button-container-render" class="g-ytsubscribe"></div><!--#modal-sample-lg--><script> $(function() { var acount =0; $('#modal-sample-lg').on('shown.bs.modal', function () { // 只加载一次，避免闪烁if(acount ===0) { var container = document.getElementById('yt-button-container-render'); var options = { 'channelid': 'UCv1uPumg4LFFC9qwYWKyxhw', 'layout': 'full', 'count': 'hidden', }; gapi.ytsubscribe.render(container, options); acount++; } }) }) </script>

< ">最后：将go实现的代码放到下面：

< "><!-- modal-sample-lg callback begin --><!-- #modal-sample-lg --><script src="https://apis.google.com/js/platform.js"></script><div id="yt-button-container-go"></div><!-- #modal-sample-lg --><script> $('#modal-sample-lg').on('shown.bs.modal', function () { var container = document.getElementById('yt-button-container-go'); var div ='<div class="g-ytsubscribe" data-channelid="UCv1uPumg4LFFC9qwYWKyxhw" data-lay安徽电视台广告部电话out="full" count="hidden"></div>' container.innerHTML = div; gapi.ytsubscribe.go(container); })</script><!-- modal-sample-lg callback end -->

< ">总结：

< ">1. 在过程中也尝试了方法，比如说使用默认的订阅按钮（不满足需求），或者说将引入的官方js放到最后，结果都没有达到目的；

< ">2. 究其原因，默认的订阅按钮是页面加载完后就已经加载结束了，而data-layout="full"，表示高度和宽度是由内容撑开的，在初始化的时候由js动态加载的logo图片还没有加载到dom树中，高度没有被撑开，订阅按钮显示不完整；

< ">3. 想到这里，若给订阅按钮最小高度，应该也是可以的（刚去验证了一下，果然是可以的，但是必须使用px，不可以使用rem，因为订阅按钮是使用iframe承载的......）

< ">4. 浏览器渲染机制博大精深，继续学习~

< ">4. 虽然Youtube订阅国内不常用，但是记录一下~