Widget:视频：修订间差异

来自HUIJIA FUN
可视化wikitext
无编辑摘要
标签：已被回退
无编辑摘要
 
（未显示同一用户的11个中间版本）
第25行： 第25行：
<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-container {
  .video-container {
        position: relative;
    position: relative;
        /* Remove fixed width/height if you want it to adapt to content, or set explicitly */
    width: <!--{$width|default:425|validate:int|escape:'html'}-->px;
        width: px; /* Use the width from the widget for consistency */
    height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
        height: auto; /* Let height adjust based on content */
    margin-bottom: 15px;
        margin-bottom: 15px;
    background: #f5f5f5;
        display: flex; /* Use flexbox */
    display: flex;
        justify-content: center; /* Center horizontally */
    align-items: center;
        align-items: center; /* Center vertically */
    justify-content: center;
        min-height: 100px; /* Give it a minimum height so the button is visible before load */
    border-radius: 4px;
    }
  }
    .video-load-btn {
  .video-load-btn {
        /* No need for absolute positioning with flexbox centering */
    padding: 10px 20px;
        padding: 10px 20px;
    background: #4285f4;
        background: #4285f4;
    color: white;
        color: white;
    border: none;
        border: none;
    border-radius: 4px;
        border-radius: 4px;
    cursor: pointer;
        cursor: pointer;
    transition: background 0.2s;
        z-index: 10;
  }
        /* Removed transform and absolute positioning */
  .video-load-btn:hover {
    }
    background: #3367d6;
    .video-load-btn:hover {
  }
        background: #3367d6;
  .video-player {
    }
    width: 100%;
    .video-player {
    height: 100%;
        width: 100%;
    display: none;
        height: 100%;
  }
        display: none;
        /* When video is loaded, it will take full space within the flex container */
    }
</style>
</style>


<div class="video-container">
<div class="video-container">
   <!-- Button will be removed after click -->
   <!-- Button is part of normal flow -->
   <button class="video-load-btn"  
   <button class="video-load-btn"  
           onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.remove()">
           onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.style.display='none'">
     ▶ Load Video
     ▶ Load Video
   </button>
   </button>

2025年7月12日 (六) 14:11的最新版本

{{#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:视频.

取自“https://huijia.fun/index.php?title=Widget:视频&oldid=1649”