Атрибут height тега <object> — висота вбудованого об'єкта

HTML

<p class="head">1. Без розмірів — власні 200×100</p>
<object data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='100'%3E%3Crect%20width='200'%20height='100'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='40'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E"></object>

<p class="head">2. Тільки height="250" — ширина сама стала 500</p>
<object height="250" data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='100'%3E%3Crect%20width='200'%20height='100'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='40'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E"></object>

<p class="head bad">3. height="50%" у блоці без власної висоти — нічого</p>
<div class="bez-vysoty">
  <object height="50%" data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='100'%3E%3Crect%20width='200'%20height='100'%20fill='%23d64545'/%3E%3C/svg%3E"></object>
</div>

<p class="head good">4. Той самий height="50%" у блоці заввишки 400 — виходить 200</p>
<div class="z-vysotoyu">
  <object height="50%" data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='100'%3E%3Crect%20width='200'%20height='100'%20fill='%233a9a4f'/%3E%3C/svg%3E"></object>
</div>

<p class="head bad">5. Вміст не завантажився — height="250" не діє на запасний текст</p>
<object height="250" data="ne-isnuye.svg">Тут запасний вміст, і він займає стільки, скільки займає рядок тексту</object>

<p class="head good">6. height="250" плюс height: 80px у стилях — виграє CSS</p>
<object class="css" height="250" data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='100'%3E%3Crect%20width='200'%20height='100'%20fill='%232f6fd0'/%3E%3C/svg%3E"></object>

CSS

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

.bad {
    color: #c0392b;
}

.good {
    color: #1b5e20;
}

object {
    outline: 2px dashed #b9c6d8;
    outline-offset: 2px;
}

.bez-vysoty {
    width: 560px;
    padding: 8px;
    border: 2px solid #d64545;
    border-radius: 6px;
    background: #fff4f4;
}

.z-vysotoyu {
    width: 560px;
    height: 400px;
    padding: 8px;
    border: 2px solid #3a9a4f;
    border-radius: 6px;
    background: #f3fbf4;
}

.css {
    height: 80px;
}

<p> З використанням атрибуту <code> height </code> </p> 
 <object id ="image" height="300" 
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
<br>
  <p> Без використання атрибуту <code> height  </code> </p>
<object  
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>

HTML

<p> Приклад використання атрибуту <code> height </code> </p>
<p id="text"> Поточна висота video: 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> height </code> </p>
 
 <object id ="image" width="100" height="100" 
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
</div>

<div class="block1" >
  <p> Без використання атрибуту <code> height  </code> </p>
<object  width="100" height="100" 
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
</div>

CSS

.block1{
  float:left;
  width:40%;
  border:2px solid black;
  
}

JS

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