SVG排版公众号文章『视频号卡片定位和隐藏』模板代码 - WXOPEN Club

模板效果
模板代码
<section style="background-color: #000;margin: 0 auto;">
    <!-- 葡萄酒视频号内容 -->
    <section style="height: 0;">
        <p style="font-size: 0;pointer-events: none;">
            <svg data-author="懂点君：关注我，从此让你多懂点" style="display: block;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 310" ></svg>
        </p>
        <section style="width:90%;margin-left: auto;margin-right: auto;text-align: center;opacity:0;">
            <mpvideosnap class="js_uneditable" data-pluginname="videosnap" data-id="export/UzFfAgtgekIEAQAAAAAA194lELVrEwAAAAstQy6ubaLX4KHWvLEZgBPEkaEAJXocJZ34zNPgMIuyR8hvaSnNR6119y1rBLN7" data-url="https://findermp.video.qq.com/251/20350/stodownload?encfilekey=XGocBFxVWK5dcyOOqpEU4yZ0ia4qlCRBBmNwYHfLdE1v1nialKO8z29sDfrW09YsFSicWVNE9pblxfjyicbSsAtXFpCc8hROb7MRzYez7pIo3ZxxkXsy8tmFyibrzgeAeDNvZI9xIuEx4s0L6qzVKrY0FSs3iaet0CCdbUnvibXPLKLeFhkia7X4MWNfMg&amp;adaptivelytrans=0&amp;bizid=1023&amp;dotrans=0&amp;hy=SZ&amp;idx=1&amp;m=b2f86b06849231328cdddbe6361d94f4&amp;token=6xykWLEnztKIzBicPuvgFxkATSMhuia6WCUthfItGDv7STg0jEfPLVJ80ExDRSmruv" data-headimgurl="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-username="v2_060000231003b20faec8c4e28d1acad1cd02ef34b077c70190f5f900c8396039066e5eb8e724@finder" data-nickname="懂点君" data-desc="为什么有的葡萄酒需要卧放贮存？#葡萄酒贮存方法@张裕葡萄酒 @酒仙网董事长鸿峰 @莫堡葡萄酒" data-nonceid="9236134762867510114" data-type="video">
                <div class="wxw_wechannel_card appmsg_card_context js_wechannel_video_card js_wechannel_video_context">
                    <div class="wxw_wechannel_card_bd">
                        <div class="wxw_wechannel_video_context" style="background-image:url(https://findermp.video.qq.com/251/20350/stodownload?encfilekey=XGocBFxVWK5dcyOOqpEU4yZ0ia4qlCRBBmNwYHfLdE1v1nialKO8z29sDfrW09YsFSicWVNE9pblxfjyicbSsAtXFpCc8hROb7MRzYez7pIo3ZxxkXsy8tmFyibrzgeAeDNvZI9xIuEx4s0L6qzVKrY0FSs3iaet0CCdbUnvibXPLKLeFhkia7X4MWNfMg&amp;adaptivelytrans=0&amp;bizid=1023&amp;dotrans=0&amp;hy=SZ&amp;idx=1&amp;m=b2f86b06849231328cdddbe6361d94f4&amp;token=x5Y29zUxcibBiaGHtmXXicGxl6KYQLh32dEtg25OvkVd5scoKmjENBTBV5s2ia6fhPHC)">
                            <i class="weui-play-btn_primary"></i>
                        </div>
                        <div class="wxw_wechannel_profile weui-flex">
                            <img class="wxw_wechannel_avatar" src="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-disable-preview="1">
                            <strong class="wxw_wechannel_nickname">懂点君</strong></div>
                        <div class="wxw_wechannel_desc">为什么有的葡萄酒需要卧放贮存？#葡萄酒贮存方法@张裕葡萄酒 @酒仙网董事长鸿峰 @莫堡葡萄酒</div>
                        <!-- 不可引用时show出来即可 --></div>
                    <div class="wxw_wechannel_card_ft weui-flex">
                        <i class="wxw_wechannel_logo"></i>视频号</div>
                </div>
            </mpvideosnap>
        </section>        
    </section>
    <!-- 手机视频号内容 -->
    <section style="height: 0;">
        <p style="font-size: 0;pointer-events: none;">
            <svg data-author="懂点君：关注我，从此让你多懂点" style="display: block;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 1338" ></svg>
        </p>
        <section style="width: 90%;margin-left: auto;margin-right: auto;text-align: center;opacity: 0;">
            <mpvideosnap class="js_uneditable" data-pluginname="videosnap" data-id="export/UzFfAgtgekIEAQAAAAAAOPglSl1vBgAAAAstQy6ubaLX4KHWvLEZgBPEgaEYYGhHENP5zNPgMIuyUzPW-LM1K0sxuc9YtonF" data-url="https://findermp.video.qq.com/251/20350/stodownload?encfilekey=RBfjicXSHKCOONJnTbRmmlD8cOQPXE48ibbr1Sx6EVFJ10ogeQDuNalnONvhunicAPfibkmQDJ0kibuSLAiaFGPwU7kV0Ciawia8InTwibm07xiakk1dQL506bzqTibyWCDDibl0HicwjcC7RSUz9mhCbCOttBLcLbEgtE8C8qxSy&amp;bizid=1023&amp;dotrans=0&amp;hy=SH&amp;idx=1&amp;m=2546556c2e921301c140ee4f48e8c529&amp;token=cztXnd9GyrHT1jF33iahtWyVHhSfGf68E66tXvoctnz4DflEYZBlJ1ZiapwNa5GDyM" data-headimgurl="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-username="v2_060000231003b20faec8c4e28d1acad1cd02ef34b077c70190f5f900c8396039066e5eb8e724@finder" data-nickname="懂点君" data-desc="手机这样充电，能延长电池寿命#手机充电#@腾讯手机管家 @小米公司 @vivo" data-nonceid="17063860744833517984" data-type="video">
                <div class="wxw_wechannel_card appmsg_card_context js_wechannel_video_card js_wechannel_video_context">
                    <div class="wxw_wechannel_card_bd">
                        <div class="wxw_wechannel_video_context" style="background-image:url(https://findermp.video.qq.com/251/20350/stodownload?encfilekey=RBfjicXSHKCOONJnTbRmmlD8cOQPXE48ibbr1Sx6EVFJ10ogeQDuNalnONvhunicAPfibkmQDJ0kibuSLAiaFGPwU7kV0Ciawia8InTwibm07xiakk1dQL506bzqTibyWCDDibl0HicwjcC7RSUz9mhCbCOttBLcLbEgtE8C8qxSy&amp;bizid=1023&amp;dotrans=0&amp;hy=SH&amp;idx=1&amp;m=2546556c2e921301c140ee4f48e8c529&amp;token=cztXnd9GyrGhE2iaHGOXDiaMFhYeGFkNb5P2l9MN7R8gmzVl1q5JQaKBTcx4uNKib3s)">
                            <i class="weui-play-btn_primary"></i>
                        </div>
                        <div class="wxw_wechannel_profile weui-flex">
                            <img class="wxw_wechannel_avatar" src="http://wx.qlogo.cn/finderhead/KA0kcMricmZKN2CmjdaC6og9OXdWdz8Xn2rd1HnGAReE/0" data-disable-preview="1">
                            <strong class="wxw_wechannel_nickname">懂点君</strong></div>
                        <div class="wxw_wechannel_desc">手机这样充电，能延长电池寿命#手机充电#@腾讯手机管家 @小米公司 @vivo</div>
                        <!-- 不可引用时show出来即可 --></div>
                    <div class="wxw_wechannel_card_ft weui-flex">
                        <i class="wxw_wechannel_logo"></i>视频号</div>
                </div>
            </mpvideosnap>
        </section>        
    </section>
    <!-- 大长图 -->
    <section style="line-height: 0;font-size: 0;pointer-events: none;">
        <svg data-author="懂点君：关注我，从此让你多懂点" style="display: block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size:100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRr4AxwPic4JzhlhXuZtWJ1RsFZ6G7hOXyWYGeQHJTszvjnCS8Ol0q02S1emYqibdnhjibDNWF9ETIhQ/0?wx_fmt=png);vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;pointer-events:none;" viewBox="0 0 750 2300"></svg>
    </section>
</section>