Widget:视频:修订间差异

来自HUIJIA FUN
无编辑摘要
无编辑摘要
第30行: 第30行:
     height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
     height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
     margin-bottom: 15px;
     margin-bottom: 15px;
     background: #000; /* Optional: placeholder background */
     background-color: #f5f5f5;
     overflow: hidden;
    display: flex;
    align-items: center;
     justify-content: center;
   }
   }
   .video-load-btn {
   .video-load-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
     padding: 10px 20px;
     padding: 10px 20px;
     background: #4285f4;
     background: #4285f4;
第44行: 第42行:
     border-radius: 4px;
     border-radius: 4px;
     cursor: pointer;
     cursor: pointer;
     z-index: 2;
     z-index: 10;
   }
   }
   .video-load-btn:hover {
   .video-load-btn:hover {
第53行: 第51行:
     height: 100%;
     height: 100%;
     display: none;
     display: none;
  }
  .video-placeholder {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
   }
   }
</style>
</style>


<div class="video-container">
<div class="video-container">
   <!-- Load Button -->
   <!-- Placeholder with button (will be removed after click) -->
   <button class="video-load-btn"
   <div class="video-placeholder">
          onclick="const video = this.nextElementSibling; video.style.display='block'; video.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.remove();">
    <button class="video-load-btn"  
    ▶ Load Video
            onclick="this.parentNode.style.display='none'; this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'">
  </button>
      ▶ Load Video
 
    </button>
   <!-- Video Element -->
  </div>
   <video class="video-player"
   <!-- Video element (hidden by default) -->
         controls
   <video class="video-player"
        width="<!--{$width|default:425|validate:int|escape:'html'}-->"
        height="<!--{$height|default:355|validate:int|escape:'html'}-->"  
         controls  
         preload="none"></video>
         preload="none"></video>
</div>
</div>
</includeonly>
</includeonly>

2025年7月12日 (六) 14:10的版本

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