Сделать встроенное видео Использовать всю доступную ширину элемента HTML HTML

Question

У меня есть встроенное видео Youtube, которое находится внутри HTML-элемента td. Я пытаюсь получить видео, чтобы иметь ширину его родительского элемента td, но при этом сохраняйте его соотношение сторон (отрегулированный по высоте).

Я пытаюсь получить размер видео, чтобы выглядеть следующим образом:

Моя проблема заключается в том, что видео выглядит следующим образом:

Как я могу использовать CSS, чтобы сделать видео в масштабе чтобы использовать всю доступную ширину элемента tdНО еще сохраняйте его соотношение сторон?

Heres мой код и мой JSFiddle example Heres:

<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> 

Answer 1

Просто дайте IFrame максимальную ширину и применить тд с процентом на основе ширины, как хорошо!

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> 

Answer 2

Я думаю, что это JSFIDDLE даст вам некоторое общее представление о том, как изменить размер видео, в то время как прилипание к его соотношению сторон (скрипка не мной).

Существует статья об этом here, что вы можете захотеть взглянуть.

В общем, что он делает, добавьте манекен <div> и используйте padding-top:75%; (значение соответствует соотношению сторон 4: 3. Вы должны отрегулировать его в соответствии с желаемым соотношением сторон).

Надеюсь, что помогло.

Answer 3

Если вы знаете соотношение сторон видео, вы можете использовать the Intrinsic Ratios for Video technique outlined on A List Apart.

В принципе, вы ставите div внутри элемента td. Сделайте это position: relative и используйте padding, чтобы сделать его правильной высотой, например. 16: 9 (с панели управления): 25px

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

Поместите 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%; 
}