Widget:视频:修订间差异
来自HUIJIA FUN
Plurimod学生会(留言 | 贡献) 无编辑摘要 标签:已被回退 |
Plurimod学生会(留言 | 贡献) 无编辑摘要 标签:已被回退 |
||
| 第26行: | 第26行: | ||
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script> | <script src="//api.html5media.info/1.2.2/html5media.min.js"></script> | ||
<style> | <style> | ||
.video- | .video-container { | ||
position: relative; | position: relative; | ||
width: <!--{$width|default:425|validate:int|escape:'html'}-->px; | width: <!--{$width|default:425|validate:int|escape:'html'}-->px; | ||
height: <!--{$height|default:355|validate:int|escape:'html'}-->px; | height: <!--{$height|default:355|validate:int|escape:'html'}-->px; | ||
margin: 10px 0; | |||
background: #f5f5f5; | background: #f5f5f5; | ||
border-radius: 4px; | border-radius: 4px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.video-load-wrapper { | |||
.video-load- | |||
position: absolute; | position: absolute; | ||
top: 0; | |||
left: 0; | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| 第45行: | 第44行: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
background: rgba(0,0,0,0. | background: rgba(0,0,0,0.05); | ||
z-index: 2; | |||
} | } | ||
.video-load-btn { | .video-load-btn { | ||
padding: 12px 24px; | padding: 12px 24px; | ||
| 第55行: | 第54行: | ||
border-radius: 4px; | border-radius: 4px; | ||
cursor: pointer; | cursor: pointer; | ||
font-size: | font-size: 16px; | ||
font-family: Arial, sans-serif; | font-family: Arial, sans-serif; | ||
box-shadow: 0 2px | box-shadow: 0 2px 5px rgba(0,0,0,0.2); | ||
transition: | transition: background 0.2s; | ||
white-space: nowrap; | |||
} | } | ||
.video-load-btn:hover { | .video-load-btn:hover { | ||
background: #3367d6; | background: #3367d6; | ||
} | } | ||
.video-player { | .video-player { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
display: none; | display: none; | ||
position: relative; | |||
z-index: 1; | |||
} | } | ||
</style> | </style> | ||
<div class="video- | <div class="video-container"> | ||
<div class="video-load- | <div class="video-load-wrapper"> | ||
<button class="video-load-btn" | <button class="video-load-btn" | ||
onclick="this. | onclick="this.parentNode.style.display='none'; this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'"> | ||
Load Video | |||
</button> | </button> | ||
</div> | </div> | ||
2025年4月5日 (六) 21:39的版本
{{#widget:视频
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|height=auto
}}
This widget lets you embed HTML5 Video Media on your wiki page.
It was created by taipan.
Using this widget
For information on how to use this widget, see widget description page on MediaWikiWidgets.org.
Copy to your site
To use this widget on your site, install MediaWiki Widgets extension and copy the complete source code of this page to your wiki as page Widget:视频.