Как вставить SWF поверх HTML-страницы?

StackOverflow https://stackoverflow.com/questions/300200

  •  08-07-2019
  •  | 
  •  

Вопрос

Я хочу вставить SWF-файл на HTML-страницу, как плавающую панель просмотра видео. У меня уже есть SWF-файл, который автоматически настраивает его размер в соответствии с размером браузера, а SWF-файл частично прозрачен. Я подумал, что могу просто добавить тег div, сделать абсолютную позицию и изменить z-index больше, но это не работает, потому что swf просто заменил все, что есть на странице.

Вот что я сделал 

<script>
      swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
      <div id="header"></div>
      <div id="shell">
          things in my html
      </div>
</body>

#header {
    position:absolute;
    z-index:100;

}

Есть идеи? Спасибо.

Это было полезно?

Решение

Как только вы правильно настроите размер, вам нужно будет установить для wmode значение transparent , чтобы увидеть, что скрывается за флеш-памятью, если вы этого не сделаете. фон будет непрозрачным.

Это быстрая вставка из документа swfobject , но ее следует получить точка через: 

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Другие советы

Я считаю, что проблема в том, что CSS плохо работает с тегами <object />. swfobject.embedSWF превращает <div id="header"></div> в тег <=> с набором атрибутов, которые могут влиять на CSS. Если вы создаете оболочку DIV вокруг заголовка DIV и применяете CSS к оболочке DIV, все работает лучше. Вам также нужно добавить 100% ширины и высоты в CSS. Вот исправленный источник: 

<script>
    swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
    <div id="wrapper">
        <div id="header"></div>
        </div>
    <div id="shell">
        things in my html
    </div>
</body>

#wrapper {
    position:absolute;
    z-index:100;
    width:100%;
    height:100%;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top