阅读:601

关注文字素材嵌入到视频里面样式

时间:2016-12-22 18:10:25  来源:哼哈网  作者:哼哈

 

微信公众平台文章视频中,视频左上角加入了关注文字素材嵌入到视频里面样式,这样就不占据了文章中视频位置,能够更好的展示视频内容。

 

样式截图:

IMG_0787.PNG

 

样式代码:

 

 

<section style="font-family: Simsun; font-size: medium; line-height: normal; white-space: normal;" class="active">

    <section style="margin-top: -40px; margin-bottom: -10px; text-align: center; color: inherit;">

        <section style="font-family: inherit; font-weight: inherit; margin-top: 3em; margin-right: -1em; margin-bottom: -4em; width: 18em; height: 2em; line-height: 2em; text-decoration: inherit; color: rgb(255, 255, 255); border-color: rgb(255, 255, 255); float: left; transform: rotate(0deg); font-size: 12px; background-color: rgb(197, 63, 70);">

            点上方蓝字看[↑↑↑]重口味视频!

        </section><br/>

    </section>

</section>

<p>

    <iframe class="video_iframe" height="375" width="500" frameborder="0" src="https://v.qq.com/iframe/player.html?vid=f0176duz68k&auto=0" allowfullscreen="allowfullscreen"></iframe>

</p>

<p style="max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);">

    <br style="max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"/>

</p>

<blockquote class="awb-extinfo-sign" style="max-width: 100%; color: rgb(62, 62, 62); line-height: 25.6px; white-space: normal; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);">

    <section style="max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">

        <section style="margin-top: -98px; margin-left: 80px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">

            <section style="margin-top: -21px; max-width: 100%; width: 0px; height: 0px; border-width: 12px; border-style: solid; border-color: transparent transparent rgb(248, 247, 245); float: none; box-sizing: border-box !important; word-wrap: break-word !important;"></section>

        </section>

    </section>

</blockquote>

 

样式教程:

把代码复制粘贴到微信公众平台,如图:

2.png

 

1、修改素材代码中引号内容的腾讯视频地址。

 

3.png

 

2、修改素材代码中,替换你自己的文字。

 
4.png
 
 
3、修改素材代码中,文字背景颜色,如果不懂颜色的话,可以参考网站:http://bj.96weixin.com/rgb/  转换一下颜色。
 
5.png
 
 
4、点击“HTML”,然后返回 ,点击右边的复制按钮即可:
 
 
6.png
 
 
更多使用教程可以查看:http://www.hengha.tv/v/56-1.html
 
 
 
 
关闭 扫描去手机上观 扫描去手机上观看