Далі приклад, як масштабувати swf/flv object (об'єкт, який відтворюється flash-player'ом) на сторінці.
▼Є HTML документ, в тілі якого є тег object ...
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
<!-- /* --><![CDATA[/*><!-- */
html, body {
height: 100%;
width: 100%;
display: block;
margin: 0 0;
}
body * {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
position: relative;
text-align: center;
}
object { font-size: 2rem; }
param { display: none; }
object>* { height: initial; }
body>* { position: absolute; }
/* --><!]]><!-- */ -->
</style>
</head>
<body>
<div id="wrapper">
<object width="100%" height="100%"
type="application/x-shockwave-flash"
data="file.swf"
>
<param name="width" value="100%" />
<param name="height" value="100%" />
<param name="wmode" value="window" />
<param name="src" value="file.swf" />
<param name="quality" value="autolow" />
<param name="allowFullScreen" value="true" />
<param name="allowFullScreenInteractive" value="true" />
<param name="allowScriptAccess" value="no" />
<param name="bgcolor" value="#ABCDEF" />
<param name="menu" value="false" />
<param name="flashvars" value="lang=uk&other_vars=..." />
<div id="no_flash_text">
<p>Flash player не запустився.</p>
<a href="support/" target="_blank"> Запитати / Повідомити </a>
</div>
</object>
</div>
</body>
</html>
Дані подано в форматі:
тег, в якому щось змінюємо: старе значення --> нове значення.
style: -->
body { transform: scale(0.64); }
body>* {
width: 156.25%;
height: 156.25%;
left: -28.125%;
top: -28.125%;
}
param[name="wmode"]: value="window" | value="..." --> value="opaque" | value="transparent"
Пояснення до значень:
156.25% == 1.5625 == 1 / 0.64
28.125% == (156.25% - 100%) / 2
Firefox має баг пов'язаний з відрисовкою, через що в ньому swf object (HTML) несуміснісний з transform (CSS), крім випадків, коли object містить
<param name="wmode" value="opaque" />
, або
<param name="wmode" value="transparent" />
.
Якщо є потреба ручного масштабування, то ще дописуємо:
meta[name="viewport"]: user-scalable=no --> user-scalable=yes
Зверніть увагу, є атрибути, які не варто чіпати:
object: width="100%" height="100%"
param[name="width"]: value="100%"
param[name="height"]: value="100%"
param[name="flashvars"]: value="..."
▼На виході маємо це: ...
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<style type="text/css">
<!-- /* --><![CDATA[/*><!-- */
html, body {
height: 100%;
width: 100%;
display: block;
margin: 0 0;
}
body * {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
position: relative;
text-align: center;
}
object { font-size: 2rem; }
param { display: none; }
object>* { height: initial; }
body>* { position: absolute; }
/* scale swf */
body { transform: scale(0.64); }
body>* {
width: 156.25%;
height: 156.25%;
left: -28.125%;
top: -28.125%;
}
/* --><!]]><!-- */ -->
</style>
</head>
<body>
<div id="wrapper">
<object width="100%" height="100%"
type="application/x-shockwave-flash"
data="file.swf"
>
<param name="width" value="100%" />
<param name="height" value="100%" />
<param name="wmode" value="opaque" />
<param name="src" value="file.swf" />
<param name="quality" value="autolow" />
<param name="allowFullScreen" value="true" />
<param name="allowFullScreenInteractive" value="true" />
<param name="allowScriptAccess" value="no" />
<param name="bgcolor" value="#ABCDEF" />
<param name="menu" value="false" />
<param name="flashvars" value="lang=uk&other_vars=..." />
<div id="no_flash_text">
<p>Flash player не запустився.</p>
<a href="support/" target="_blank"> Запитати / Повідомити </a>
</div>
</object>
</div>
</body>
</html>
Порівняння.
До:
Після:
