公眾號(hào)SVG排版圖文『精準(zhǔn)定位視頻插入位置』模板代碼
模板效果
模板代碼
<section style="margin: 0 auto;overflow: hidden;box-sizing: border-box;">
? ? <!-- 視頻區(qū)域 -->
? ? <section style="height:0;">
? ? ? ? <!-- 控制視頻垂直距離 -->
? ? ? ? <p style="font-size:0;line-height: 0;">
? ? ? ? ? ? <svg style="display: inline-block;width: 100%;pointer-events:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 1080 160" data-copyright="懂點(diǎn)君"></svg>
? ? ? ? </p>
? ? ? ? <!-- 視頻播放區(qū)域 -->
? ? ? ? <section style="transform: translate(0, 0) scale(0.87);box-sizing: border-box !important;">
? ? ? ? ? ? <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=p09791f2590" allowFullScreen="true"></iframe>
? ? ? ? </section>
? ? ? ? <!-- 控制視頻垂直距離 -->
? ? ? ? <p style="font-size:0;line-height: 0;">
? ? ? ? ? ? <svg style="display: inline-block;width: 100%;pointer-events:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 1080 448" data-copyright="懂點(diǎn)君"></svg>
? ? ? ? </p>
? ? ? ? <!-- 視頻播放區(qū)域 -->
? ? ? ? <section style="transform: translate(-13px, 0) rotate(70deg) scale(0.88);box-sizing: border-box !important;">
? ? ? ? ? ? <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=p09791f2590" allowFullScreen="true"></iframe>
? ? ? ? </section>
? ? </section>
? ? <!-- 背景圖區(qū)域 -->
? ? <section style="transform:scale(1);pointer-events:none;">
? ? ? ? <svg viewBox="0 0 1080 2542" style="display: inline-block;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;background-position: 0 0;background-repeat: no-repeat;background-size:100% auto;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqR9C2BfPsW6N1h25A1r389h50X7sjqrvDBo6vTMjEK3MFykticsFV8ptSKYWF5K5yMCSgWc0Cd5tWg/0?wx_fmt=png);" data-copyright="懂點(diǎn)君" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" xml:space="preserve"></svg>
? ? </section>
</section>
模板應(yīng)用
