製作嵌入式視頻響應

我試圖從私人託管服務（我爲大學工作）嵌入視頻到我們的網站，並且我很難使其響應。不同於YouTube或Vimeo的視頻，高度和寬度似乎在「源」來定義如下所示：

<iframe width="640" height="385" src="http://videolibrary.sheffield.ac.uk/player?autostart=n&fullscreen=y&width=640&height=385&videoId=6432&quality=hi&captions=n" frameborder="0" scrolling="no"></iframe>

我已經成功之前解決這個問題很簡單，和YouTube視頻使用以下CMS（並將嵌入代碼放在適當的div）

<style type="text/css"> 
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}</style>

但是，這只是不工作在這裏。我無法找到編輯嵌入代碼的方法，並且無法找到任何適用於此的技巧。如果有人有任何想法，我會非常感激！

來源

2013-07-24 Steve McCarthy

可能重複的[縮小Youtube視頻到響應寬度]（http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width） – davidcondrey

我想這個jQuery插件的流體寬度視頻嵌入可能會幫助你，看看！

http://fitvidsjs.com/

來源

2013-07-24 10:32:46

感謝您的提示，但不幸的是，似乎沒有做任何事情，除非我加錯了。如果有任何事情只是迫使視頻的尺寸和頁面的其他部分已經迴應，但看看細節，我不認爲我使用的視頻播放器是支持的。 –

有一個選項可以添加您自己的視頻供應商。有關更多詳細信息，請參閱https://github.com/davatron5000/FitVids.js上的文檔。 – MGDTech

這仍然不起作用。它只是裁剪視頻而不是調整大小。我預計這可能是由於視頻源網址中的「＆width = 640＆height = 385」細節。如果我刪除它，則視頻會一起消失。 –

我用CSS來做到這一點。對於我的用途（從嵌入的Vimeo上一個負責任的現場視頻），這部作品在我所測試的瀏覽器大：

@media screen and (max-width: 750px) { 
    iframe { 
     max-width: 100% !important; 
     width: auto !important; 
     height: auto !important; 
    } 
}

它不需要圖像佔位符，所以這是非常簡單的。

來源

2015-06-22 18:09:22

製作嵌入式視頻響應

回答

相關問題