製作嵌入式視頻使用所有可用的HTML元素寬度

我有一個嵌入的Youtube視頻，位於td HTML元素內。我試圖讓視頻具有其父寬度爲td的寬度，但仍保持寬高比（高寬比）。製作嵌入式視頻使用所有可用的HTML元素寬度

我試圖讓視頻大小，看起來像這樣： enter image description here

我的問題是，視頻看起來是這樣的： enter image description here

如何使用CSS讓視頻縮放最多使用td元素的所有可用寬度但是仍然保持其縱橫比？

繼承人我的代碼和我的繼承人JSFiddle example：

<table width="100%"> 
    <tr valign="top"> 
     <td> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
     </td> 
     <td style="width: 450px;"> 
      <!-- Note the Youtube video is loaded using the Youtube Javscript API--> 
      <iframe src="https://www.youtube.com/embed/zrWkRHSK6A8?enablejsapi=1" style="width: auto; height: auto;"></iframe> 
     </td> 
     <td> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
     </td> 
    </tr> 
</table>

來源

2013-06-27 Jake M

你說你試圖讓視頻大小看起來像這樣？它在哪裏..？？你忘了插入什麼？ –

@Kaushik你能看到屏幕截圖（圖片）下方的文字「我試圖讓視頻大小看起來像這樣：」？ –

問題是您的網頁不知道其他網頁內容的屬性（這是iframe的內容）。最好的解決方案是簡單地手動填寫所需的大小。如果你使用Javascript，只需計算td寬度和高度的尺寸。 –

只要給的iframe一個最大寬度和一個基於百分比寬度應用TD以及！

JSFIDDLE

<table width="100%"> 
    <tr valign="top"> 
     <td> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
     </td> 
     <td style="width: 50%;"> 
      <!-- Note the Youtube video is loaded using the Youtube Javscript API--> 
      <iframe src="https://www.youtube.com/embed/zrWkRHSK6A8?enablejsapi=1" style="max-width: 100%;height: 100%;"></iframe> 
     </td> 
     <td> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
     </td> 
    </tr> 
</table>

來源

2013-06-27 10:43:48 designtocode

我認爲這JSFIDDLE會給你如何調整你的視頻的一些基本理念，同時堅持其長寬比（小提琴不是我）。

有一篇關於它的文章here，你可能想看看。

基本上，他所做的是添加一個虛擬<div>並使用padding-top:75%;（該值爲4：3的長寬比，您必須調整它以適合您所需的寬高比）。

希望有幫助。

來源

2013-06-27 10:47:44 rktcool

如果您知道視頻的寬高比，則可以使用the Intrinsic Ratios for Video technique outlined on A List Apart。

基本上，您在td元素內部放置了一個div。將它設爲position: relative並使用padding使其成爲正確的高度，例如爲16：9（具有25像素控制巴）：

div.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 25px; 
    height: 0; 
}

把YouTube的iframe中DIV中，並設置position: absolute; top: 0; left: 0; height: 100%; width: 100%;在其上，例如

iframe[src*=['youtube.com/embed/'] { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

來源

2013-06-27 10:53:21

製作嵌入式視頻使用所有可用的HTML元素寬度

回答

相關問題