Widget:视频:修订间差异

来自HUIJIA FUN
无编辑摘要
标签已被回退
无编辑摘要
标签手工回退
第30行: 第30行:
     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;
     margin-bottom: 15px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
   }
   }
   .video-load-wrapper {
   .video-load-btn {
     position: absolute;
     position: absolute;
     top: 0;
     top: 50%;
     left: 0;
     left: 50%;
    width: 100%;
     transform: translate(-50%, -50%);
     height: 100%;
     padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    z-index: 2;
  }
  .video-load-btn {
     padding: 12px 24px;
     background: #4285f4;
     background: #4285f4;
     color: white;
     color: white;
第54行: 第43行:
     border-radius: 4px;
     border-radius: 4px;
     cursor: pointer;
     cursor: pointer;
     font-size: 16px;
     z-index: 10;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background 0.2s;
    white-space: nowrap;
   }
   }
   .video-load-btn:hover {
   .video-load-btn:hover {
第67行: 第52行:
     height: 100%;
     height: 100%;
     display: none;
     display: none;
    position: relative;
    z-index: 1;
   }
   }
</style>
</style>


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

2025年4月5日 (六) 21:43的版本

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