全百科精品资源分享
免费优质资源下载平台

左侧/右侧悬浮视频广告代码分享 超精简版

播放按钮
文章目录

访问本文章时已经看到右侧悬浮的小姐姐们的视频了吧,想不想把小姐姐搬到你的网站上呢?别着急,全百科网这就把此功能的核心代码与样式代码分享给你哈。
左侧/右侧悬浮视频广告代码分享 超精简版

核心代码

右侧代码

// 作者:全百科网
// 网站:http://www.quanbaike.com/
<div style="position: fixed;top:300px;right:5px;">//调整右侧right距离
<a href="http://www.quanbaike.com/news/2009.html"><video width="300" height="400" controls>//调整视频宽度width与高度height
      <source src="http://cdn.51lm.tv/lm/spread/pc1905/video_2.mp4" type="video/mp4">
      您的浏览器不支持HTML5视频。</video> </a>
</div>

左侧代码

// 作者:全百科网
// 网站:http://www.quanbaike.com/
<div style="position: fixed;top:300px;left:5px;"> //调整左侧left距离
<a href="http://www.quanbaike.com/news/2009.html"><video width="300" height="400" controls> //调整视频宽度width与高度height
      <source src="http://cdn.51lm.tv/lm/spread/pc1905/video_2.mp4" type="video/mp4">
      您的浏览器不支持HTML5视频。</video> </a>
</div>

样式代码

// 作者:全百科网
// 网站:http://www.quanbaike.com/
<style>
video {
  width: 200px; //调整播放器宽度
  vertical-align: bottom;
}
</style>

此代码由全百科网设计开发,转载还请保留来源哟。如果你有更好更精简的实现方式欢迎评论区留言哦

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0) 打赏
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 左侧/右侧悬浮视频广告代码分享 超精简版
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏