Как избавиться от пустого пространства вокруг элемента <embed>? - PullRequest
Новая
       22

Как избавиться от пустого пространства вокруг элемента <embed>?

2 голосов
/ 03 апреля 2009

РЕЗЮМЕ: вставка со 100% шириной и высотой увеличивает размер своих родителей на 100% ширины и высоты бабушки и дедушки. Как заставить элемент embed сжать все пустое пространство вокруг него, чтобы он идеально подходил по ширине и высоте родительского элемента?

У меня есть страница с изображением, которая при нажатии заменяется элементом вставки, который воспроизводит фильм быстрого времени.

Проблема в том, что во встроенном фильме много пустого пространства. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title></head>
    <body>
        <div style="border:1px solid #000;">
        <embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
        </div>
    </body>
</html>

Видео имеет неизвестный размер, так как мне избавиться от этого пробела, оставив высоту и ширину на 100%?

РЕДАКТИРОВАТЬ: Хотя это не показывает, я на самом деле очищаю отступы и поля. Пустое пространство все еще остается.

РЕДАКТИРОВАТЬ 2: рассматриваемое белое пространство находится между фильмом и черной рамкой, а не черной рамкой и браузером.

Ответы [ 7 ]

4 голосов
/ 03 апреля 2009

Вы очищаете поля браузера по умолчанию и отступы? В противном случае вам нужно это сделать.

Большинство людей используют стили сброса CSS для нормализации полей и отступов в разных браузерах. Эрик Майер (Eric Meyer): Сброс CSS

.

РЕДАКТИРОВАТЬ: Чтобы удалить пространство под вложением, установите display: block на embed. Смотри: http://media.nodnod.net/embed.html

1 голос
/ 14 мая 2011

WOOHOO,
Я очень долго искал этот ответ и наконец нашел его!
Вам нужно будет поместить элемент embed в элемент object, который находится в iframe или фрейме:
Страница iframe 

<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>


Источник iframe 

<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>

Убедитесь, что значение высоты и ширины в элементах iframe, object и embed одинаково.

0 голосов
/ 24 августа 2009

Оказывается, что нет другого способа сделать это, кроме как увеличить масштаб фильма до размера родителя с помощью scale="aspect".

Хотя это и не идеальное решение, оно пока подойдет.

0 голосов
/ 03 апреля 2009

Использовали ли вы инспектор DOM для проверки того, что пробел не является частью встраивания?

Кроме того, вы можете поместить его в панель / div / etc и связываться с css: 

position: relative; top: -10px; left: -10px; overflow: hidden;
0 голосов
/ 03 апреля 2009

Хмм ...

Это ужасный хак, но вы можете использовать таблицу: 

<table width="100%" height="100%">
  <tr>
    <td align="center" valign="middle"><embed /></td>
  </tr>
</table>
0 голосов
/ 03 апреля 2009

Попробуйте установить float: left как для div, так и для внедренного элемента, вот так. Это удалит лишние пробелы. 

<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
   <embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>
0 голосов
/ 03 апреля 2009

Я не знаком с встраиваемыми элементами, но мне кажется, что когда вы устанавливаете ширину на 100%, вы устанавливаете его на ширину родительского элемента, который в данном случае является div, и div занимает все доступная ширина, так как это блочный элемент.

Таким образом, вы можете либо плавать в окружающем элементе div, либо отображать его встроенным, чтобы его размер соответствовал содержимому, а не доступному пространству вокруг него.

...