Атрибут width тега <embed> — ширина вбудованого вмісту

HTML

<p class="head">1. Той самий файл 300×200 у рамці 150×80</p>
<div class="ryad">
  <div class="stovp">
    <p class="pidpys">embed width="150" height="80"</p>
    <embed type="image/svg+xml" width="150" height="80"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='200'%3E%3Crect%20width='300'%20height='200'%20fill='%232f6fd0'/%3E%3Ctext%20x='12'%20y='40'%20fill='%23ffffff'%20font-size='22'%3E300%20%D0%BD%D0%B0%20200%3C/text%3E%3C/svg%3E">
    <p class="znak bad">видно лише лівий верхній кут: вміст обрізано</p>
  </div>
  <div class="stovp">
    <p class="pidpys">img width="150" height="80"</p>
    <img width="150" height="80"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='200'%3E%3Crect%20width='300'%20height='200'%20fill='%2372b043'/%3E%3Ctext%20x='12'%20y='40'%20fill='%23ffffff'%20font-size='22'%3E300%20%D0%BD%D0%B0%20200%3C/text%3E%3C/svg%3E">
    <p class="znak good">той самий файл стиснуто до заданого розміру</p>
  </div>
</div>
<p class="note">Ось головна відмінність: для картинки width — це розмір
   зображення, а для embed — розмір вікна, крізь яке видно вміст.</p>

<p class="head">2. Числа й не-числа у width</p>
<div class="ryad">
  <div class="stovp">
    <p class="pidpys">width="200" height="80"</p>
    <embed type="image/svg+xml" width="200" height="80"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2060'%3E%3Crect%20width='100'%20height='60'%20fill='%232f6fd0'/%3E%3C/svg%3E">
    <p class="znak">рамка справді 200 пікселів; малюнок тягнеться (у нього немає
      власного розміру) і вписується за пропорціями — звідси поля з боків</p>
  </div>
  <div class="stovp">
    <p class="pidpys">width="50%" height="80"</p>
    <embed type="image/svg+xml" width="50%" height="80"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2060'%3E%3Crect%20width='100'%20height='60'%20fill='%232f6fd0'/%3E%3C/svg%3E">
    <p class="znak">відсоток рахується від ширини контейнера</p>
  </div>
  <div class="stovp">
    <p class="pidpys">width="abc" height="80"</p>
    <embed type="image/svg+xml" width="abc" height="80"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2060'%3E%3Crect%20width='100'%20height='60'%20fill='%23d64545'/%3E%3C/svg%3E">
    <p class="znak bad">значення відкинуто мовчки</p>
  </div>
  <div class="stovp">
    <p class="pidpys">width="-100" height="80"</p>
    <embed type="image/svg+xml" width="-100" height="80"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2060'%3E%3Crect%20width='100'%20height='60'%20fill='%23d64545'/%3E%3C/svg%3E">
    <p class="znak bad">теж відкинуто</p>
  </div>
</div>
<p class="note">Дві останні рамки однакові: коли числа немає, ширину рахує вже сам
   переглядач із висоти й пропорцій вмісту. Ані попередження, ані порожнього
   місця — просто не той розмір, який ви написали.</p>

<p class="head">3. Стилі сильніші за атрибут</p>
<div class="ryad">
  <div class="stovp">
    <p class="pidpys">width="300", у стилях width: 120px</p>
    <embed class="vuzka" type="image/svg+xml" width="300" height="80"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2060'%3E%3Crect%20width='100'%20height='60'%20fill='%232f6fd0'/%3E%3C/svg%3E">
    <p class="znak good">виграв css: 120px</p>
  </div>
</div>

CSS

.head {
    margin: 20px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ryad {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.stovp {
    width: 240px;
    padding: 6px;
    border: 2px dashed #b9c6d8;
    border-radius: 6px;
}

.pidpys {
    margin: 0 0 6px;
    color: #1b4f9c;
    font: 13px/1.6 ui-monospace, monospace;
}

embed,
img {
    display: block;
    outline: 2px solid #5a6472;
}

.vuzka {
    width: 120px;
}

.znak {
    margin: 6px 0 0;
    font-size: .85em;
}

.bad {
    color: #c0392b;
}

.good {
    color: #1b5e20;
}

.note {
    max-width: 620px;
    margin: 10px 0 0;
    color: #5a6472;
    font-size: .9em;
}

HTML

<p> Приклад використання атрибуту <code> width </code> </p>
<p id="text"> Поточна ширина фрейма: 100 </p>
<input type="range" id="range" min="0" max="500" step="1" name="range">
<input type="button" value="Встановити ширину" onclick="f()">
<hr>
<div class="block1" >
  <p> З використанням атрибуту <code> width </code> </p>
   <embed id="image" width="100" height="260" src="//www.youtube.com/embed/58-atNakMWw"  allowfullscreen></embed>
</div>

<div class="block1" >
  <p> Без використання атрибуту <code> width </code> </p>
  <embed width="200" height="260" src="//www.youtube.com/embed/58-atNakMWw"  allowfullscreen></embed>
</div>

CSS

.block1{
  float:left;
  padding:10px;
  border:2px solid black;
  
}

JS

function f() {
  var width = document.getElementById("range").value;
  var image = document.getElementById("image");
  image.setAttribute("width", width);
  text.innerHTML = "Поточна ширина зображення " + width;
}
//# sourceURL=pen.js