響應式視頻不適合視頻容器

我正在嘗試使用響應式介紹視頻製作一個網站，其中帶有一些文本和播放按鈕的疊加部門。響應式視頻不適合視頻容器

我的視頻非常適合本地服務器，但是當我上傳項目時，視頻不會縮放。

請參閱網站的原型和生活問題：http://instagib.dk/westring-kbh/

按鈕具有目前沒有的功能。問題是網站上的最初視頻。它不適合/縮放。我試圖在一個容器的背景下做一個短片視頻播放。播放按鈕將是一個在Lightbox中打開的大型視頻。只是爲了節省用戶的一些bandwitdh

HTML：

<div class="video-container"> 
    <div class="video-overlay"> 
     <div class="video-overlay-content"> 
      <p class="velkommen">Velkommen</p> 
      <h1 class="index-hero-text">Har du virkelig<br /> brug for et helt<br /> reklame bureau?</h1> 
      <button id="play-video-btn" class="play-video-btn">Afspil video</button> 
     </div> 
    </div> 
    <video id="index-intro-video" class="index-intro-video" preload="auto" autoplay="true" loop="loop" poster="img/westring-logo.svg"> 
     <source src="video/DoorMist-small.mp4" type="video/mp4" media="all and (max-width:480px)"> 
     <source src="video/DoorMist-small.webm" type="video/webm" media="all and (max-width:480px)"> 
     Your browser does not support the video tag. I suggest you upgrade your browser. 
    </video> 
</div>

CSS：

video-container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
    .video-overlay { 
     position: absolute; 
     width: 100%; 
     height: auto; 
     z-index: 2; 
     color: #fff; 
    } 
     .video-overlay-content { 
      margin: 0 10% 0 10%; 
      width: 90%; 
      height: auto; 
     } 
      .velkommen { 
       letter-spacing: 2px; 
       margin-top: 20px; 
       margin: 10px 0 15px 0; 
       font-size: 12px; 
       text-transform: uppercase; 
      } 

      .index-hero-text { 
       font-size: 30px; 
       font-size: 8vw; 
       font-weight: bold; 
      } 

      .play-video-btn { 
       width: 60px; 
       height: 30px; 
       margin-top: 15px; 
       background: #ddd; 
       z-index: 3; 
      } 

    .index-intro-video { 
     width: 100%; 
     height: auto; 
     max-width: 1280px; 
    }

來源

2015-01-07 Mikkel Madsen

當我點擊視頻按鈕時，沒有任何反應，對不起。 –

目前它沒有功能。問題是網站上的最初視頻。它不適合/縮放。我正在試圖在一個容器的背景下進行一個簡短的視頻播放。播放按鈕將是一個在Lightbox中打開的大型視頻。只是爲了保存用戶一些bandwitdh。 –

我還沒有明白你的意思。沒有視頻爲我播放。如果你想要一個背景視頻，這是我認爲你在談論的，看看這個插件：http://dfcb.github.io/BigVideo.js/ –

我發現這個問題，以我自己的問題。

我已經放置了一個不正確的尺寸的隨機佔位符圖像。這導致了我試圖描述的錯誤，這是我不知道的。謝謝你的時間:)

順便說一下，我是這個堆棧規則集的新手。如果你找到了解決方案，回答你自己的問題是否正確，讓所有人都知道這篇文章不需要進一步的幫助。

來源

2015-01-07 15:49:55

是的，如果發現它，總是最好發佈解決方案:) –

響應式視頻不適合視頻容器

回答

相關問題