视频添加广告logo防止恶意转载

Hi，这一期夏柔给大家带来如何在文章页的视频区块添加LOGO版权代码。

先看演示：

是的，视频中右上角的WordSafe是版权LOGO，是不是很酷呢？

其实实现原理并不困难，几个CSS代码就可以实现了！

方法如下：

原理：添加图片，固定高度，分别在电脑/手机端生效不同CSS代码

手机端代码：（高度、间距、大小请自己写，每个人网站设置的视频地方不同展示的也不同）

/*手机端代码*/
<div class="showphone">
<style>
.showphone{display:inline;}
@media (min-width:960px){
.showphone{display:none;}
}
.wponlogo{
position: absolute;
margin-top: 高度%;
margin-left: 距左间距%;
width:你的大小%;
}
</style>
<img class="wponlogo active" src="https://www.wpon.cn/wp-content/uploads/2020/12/2020122801245273.png" alt="视频添加广告logo防止恶意转载" title="视频添加广告logo防止恶意转载" data-pp-logo-func="container"></div>

电脑端代码：（高度、间距、大小请自己写，每个人网站设置的视频地方不同展示的也不同）

/*电脑端代码*/
<div class="showpc">
<style>
.showpc{display:none;}
@media (min-width:960px){
.showpc{display:inline;}
}
.wponlogo2 {
position: absolute;
margin-top: 高度%;
margin-left: 距左间距%;
width:你的大小%;
}
</style>

<img class="wponlogo2 active" src="https://www.wpon.cn/wp-content/uploads/2020/12/2020122801245273.png" data-pp-logo-func="container"></div>

视频自动播放代码：

<figure class="wp-block-video"><video autoplay="" controls="" loop="" poster="https://www.wpon.cn/wp-content/uploads/2021/07/2021072313474746.png" preload="auto" src="https://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8" playsinline=""></video></figure>

如果你不会设置css，请百度请教。

依旧原创，转载请注明来源。