模板效果

【点击查看效果】

模板代码

<section style="margin: 0 auto;overflow: hidden;box-sizing: border-box;">
    <!-- 视频区域 -->
    <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="懂点君"></svg>
        </p>
        <!-- 视频播放区域 -->
        <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="懂点君"></svg>
        </p>
        <!-- 视频播放区域 -->
        <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>
    <!-- 背景图区域 -->
    <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="懂点君" 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>

模板应用