Изменить размер iframe под aside

[usesa]

Здравствуйте!

Учусь программировать в JS, но не всё проходит гладко. В сайдбар выгружаю три iframe с роликами youtube. Хочу, чтобы размеры iframe были по ширине aside (в теги aside разместил сайдбар). Всем фреймам iframe присвоил id="sidevid" . Почему-то не могу получить ширину aside Помогите, пожалуйста.

window.onload = function(){
		var aside = document.getElementsByTagName('aside');
		Wid=aside.offsetWidth;
		var div = document.getElementById("sidevid");
		div.style.width = Wid+"px";
		Hei=Wid/1.77;
		div.style.height = Hei+"px";
	}

Если ещё что-то не так написал - укажите на ошибки. Не волшебник, только учусь. Спасибо!

[hfts_rider]

А для чего задавать ширину через js если можно просто стиль дать?

[usesa]

Даже если ширина сайдбара в процентах? Предположим ширину-то я ещё процентами задам. А что будет с высотой? И не отразится ли это на качестве фрейма, если задавать через css, а не в стилях элемента?

[danik.js]

Ну с шириной то проблем нет - width: 100%.
С высотой сложнее. В css нет непосредственного способа задать соотношение сторон. Но можно использовать костыль, основанный на том, что padding-top/padding-bottom высчитывается от ширины:

<aside>
    <div>
        <iframe src="http://javascript.ru" frameborder="0"></iframe>
    </div>
</aside>

<style>
    html, body{margin:0;padding:0;height:100%}
    aside {
        width: 20%;
        height: 100%;
        background: yellow;
    }
    aside div{
        width: 100%;
        height: 0;
        padding-top: 56.5%; /* 100/1.77 */
        position: relative;
    }
    aside div iframe{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
</style>

[usesa]

danik.js , задумка интересная, спасибо, проникся, буду знать что есть такой костыль. Но очевидно, что в сайдбар будут запихивать и другие дивы без фреймов и там (возможно) будут всякие-разные проблемы с ними потом из-за этого костыля. Неужели никак нельзя получить размеры ширины блока aside и просто проставить стилем во фрейм?

[kostyanet]

Для начала надо clientWidth, потому что оффсет включает все, а клиент выключает все кроме того что нам надо.

Для конца - при чем тут aside? Если вы не знаете чем обернется использование специального тега в будущем, возможно в скором будущем, используйте заведомо вечные теги без особых свойств, например div (arbitrary division)

[danik.js]

Но очевидно, что в сайдбар будут запихивать и другие дивы без фреймов и там (возможно) будут всякие-разные проблемы с ними потом из-за этого костыля.

Хоть это и костыль, но js для задания размеров - еще более страшный костыль. Не вижу проблем с другими дивами. Используй классы вместо имен тегов. Я ж просто для примера css писал.

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

width: 100% в css задай. А костыль мой - для задания пропорций.

Если вы не знаете чем обернется использование специального тега в будущем, возможно в скором будущем, используйте заведомо вечные теги без особых свойств, например div

И чем же оно обернется? И какие у него особые свойства?

[BETEPAH]

Если ещё что-то не так написал - укажите на ошибки

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

[kostyanet]

И чем же оно обернется? И какие у него особые свойства?

У всех нормальных людей в блоке normalization весь свой набор элементов превращается в div. Для чего спрашивается городят все эти новые теги, если народу надо только разнообразие имен одного и того же дива.

Я не знаю какие они, надо читать спецуху чтобы понять что из того что там сформулировано применяется, а что еще нет, но может быть. Читать не хочу. Кто применяет - тот пусть читает.

aside это сноска по-книжному. При чем тут видео? Не важно, конечно. Я только хотел сказать что большой выбор до бобра не доведет.

[kostyanet]

И еще, тренд html'я пятого в развитии структуры документов. Которая как планируется послужит повышению релевантности поиска и все такое. Если гугля, допустим, перестанет искать в aside, поскольку а чо там вообще искать - там же сноски - то и не найдет чего вы туда важного такого засунули.

В другой плоскости той же задачи - itemprop'ы. Я тут недавно засунул один такой айтемпроп в линк стилей, вместо rel, браузер х забил на стили. Пришлось вернуть rel