HTML+CSS+JavaScript

Вот тестовая страничка, как примерно выглядят блоки сайта, упрощённая.
Проблема в том, что не получается сделать так, чтоб при уменьшении окна
браузера чтоб видео уменьшалось по ширине этих блоков с правой и с
левой стороны, чтоб видео не налезало на блоки или вообще в низ не
уходило за блоки, при уменьшении окна браузера.
Скажите, как исправить правильно?

<!--Контент--> <div> <div  align="center"> <div style="background-color: silver; float:left; width: 240px;  height: 100%; border:1px solid black; "></div> <div style="background-color: silver;float:right; width: 240px;  height: 100%; border:1px solid black; "></div> <script type="text/javascript"> if(screen.width<=800){ document.write('<div align="center"> <object width="480" height="385"><param name="movie"  value="http://www.youtube.com/v/yYRdCu_b1Aw?fs=1&hl=ru_RU"> </param><param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/yYRdCu_b1Aw?fs=1&hl=ru_RU"  type="application/x-shockwave-flash" allowscriptaccess="always"  allowfullscreen="true" width="480" height="385"></embed></object> </div>'); } else { document.write('<div align="center"><object width="686" height="551"> <param name="movie" value="http://www.youtube.com/v/yYRdCu_b1Aw?fs=1&hl=ru_RU"> </param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess"  value="always"></param><embed src="http://www.youtube.com/v/yYRdCu_b1Aw?fs=1&hl=ru_RU"  type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="686"  height="551"></embed></object></div>'); } </script> <br/> <b>Конечный результат после применения: </b>  <div class="verx_otstyp"></div> <ul class="strelka_marker"> <li><b>Вы сумеете</b> извлекать колоссальную дополнительную прибыль  из вашей базы подписчиков, которая будет сильно расти в своем размере  при применении стратегии из данного видео-курса. </li> <div class="verx_otstyp"></div> <li>Посмотрев данное видео, вы напишите и составите уникальный  продающий текст, имеющий фантастические показатели конверсии.  Если раньше у вас покупал каждый двухсотый человек, <b><i>то теперь  продажи могут увеличиться в два, а то и в три раза.</i></b> </li>  <div class="verx_otstyp"></div> <li><b>Вы больше никогда не получите "нет" </b>от крупных партнеров  по поводу рекламы ваших продуктов. Обладая этими знаниями, вы сможете  строить крупных партнеров буквально в очередь, чтобы они рекламировали  ваш продукт и приносили вам массу продаж, а также кучу новых подписчиков  на рассылку. </li>  <div class="verx_otstyp"></div> <li><b>После применения видеокурса вы получите сотни и даже тысячи целевых  посетителей в день,</b> которые превращаются в ваших подписчиков и  покупателей ваших информационных товаров. Причем ваша партнерская  программа работает как четкий автоматический механизм, за которым вам  нужно просто присматривать время от времени.</li> </ul> <br /> </div> <br /> </div> </div> </div> </div>

document.write('<div align="center"><object width="100%" > ......

Можете вывести блок с видео обычным способом (не через JavaScript). При этом укажите оригинальные(не уменьшенные) размеры видео в тегах object и embed через атрибуты width и height (в вашем случаи width="686" height="551"). В таблицу стилей добавьте правило:

object, embed {   max-width: 100%; }

В этом случаи если объект с видео в исходном размере помещается в родительский блок, то он выведется в исходном размере. Если нет - то его ширина будет автоматически подстроена под ширину родителя так, чтобы объект не вылезал из родителя. Высота у объекта с видео всегда будет постоянной и будет равна значению, указанному в атрибуте height тега object или embed (если браузер сумеет обработать тег object, то тег embed, расположенный внутри будет проигнорирован и высота объекта с видео будет равна значение атрибута height тега object, если же браузер не сумеет обработать тег object, но сумеет обработать тег embed, то высота объекта с видео будет равна значению атрибута height тега embed ).

Этот приём будет работать по всех браузерах кроме ИЕ6. Если заботитесь о пользователях ИЕ6, то можете добавить для него своё отдельное правило через условные комментарии или через хак:

object, embed {   width: 100%; }

При этом объект с видео будет всегда занимать всю ширину родительского блока. Высота у объекта с видео в этом случаи также будет постоянной и будет равна значению, указанному в атрибуте height тега object или embed.

Этот же приём можно использовать с изображениями, но там есть свои тонкости. Если интересно - расскажу :)

неужто работает?

для картинок если через атрибуты width и height заданы, стилями не перебить

Отлично работает :)

Для картинок, которые нужно при необходимости уменьшить, не нужно устанавливать атрибуты width и height. Если их установить, то при ситуации, когда картинка в родителя не влезает её ширина будет будет уменьшаться(до 100% ширины родителя), а высота оставаться той же что и в начале, т.е. пропорция будет искажаться. Можно сказать, что атрибут width в данном случаи ведёт себя точно так же как и CSS-свойство width. А взаимодействуют CSS-свойства width и max-width по правилам, указанным в таблице на этой странице:
http://htmlbook.ru/css/max-width

А если атрибуты width и height не указывать, то масштабирование и отображение картинки в полную величину (если картинка помещается в родителя) будет происходить корректно. Вот пример вёрстки, в которой применён этот приём для изображений (баннеры):
http://vrach-ufa.irbis09.jino.ru/

Также есть хитрости, связанные с ИЕ6 и ИЕ7. Если интересно - расскажу.

P.S, Приём этот вычитал в книге "CSS ручной работы", правда немного его изменил. Для резиновых макетов - вещь просто незаменимая!

меня интересует следующее

1. внешний стиль css

2. html 4.0 :

<img width="100" >


во внешнем файле стилей можно переопределить ширину картинки чтобы это работало везде?

Если вы установите ширину для всех изображений(в любых единицах) во внешнем файле css, то это свойство перебьёт значение атрибута width у всех изображений.