I don’t know if I am missing an important thing here, or whatever I am doing wrong?! Any idea would be nice.
I try to embed a stream onto a page, using this approach:
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: "100%",
channel: "monstercat",
layout: "video"
});
However, the “height” value gets completely ignored when I do set a relative (percentage) value.
Any absolute value (height: 500,) is working though?!?
The width value is working fine for both (relative and absolute values) !!
Why?! This doesn’t make any sense?! Google couldn’t help me either as this certainly is a bit weird…?!
It works; 100% does not mean 100% of the browser window, it’s 100% height of its parent, in this case div#twitch-embed. See https://r.3v.fi/twitchembed.html for a demonstration, where the width and height of the embed are set to 100% and there’s a button to toggle the parent’s (div#twitch-embed's) height to 100vh.
Source below as well.
<!DOCTYPE html>
<style>
html,body { margin: 0; padding: 0; position: relative; }
.style {
position:absolute;
top:0;
right:0;
}
.full-height {
height: 100vh;
}
#info-box {
height: 20px;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
border: 0;
background: red;
color: white;
line-height: 20px;
font-size: 20px;
position: absolute;
bottom: 0px;
overflow: hidden;
}
</style>
<div class="style">
<button id="style">Toggle twitch-embed height</button>
</div>
<div id="info-box">This is where document.body ends, at <span id="info"></span></div>
<div id="twitch-embed"></div>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: '100%',
height: '100%',
channel: "monstercat"
});
</script>
<script type="text/javascript">
var embed = document.getElementById('twitch-embed');
var info = document.getElementById('info');
var cls = 'full-height';
function updateInfo() {
info.textContent = document.body.clientHeight + 'px, #twitch-embed height is ' + embed.clientHeight + 'px';
}
updateInfo();
document.getElementById('style').addEventListener('click', function() {
if (embed.classList.contains(cls)) {
embed.classList.remove(cls);
} else {
embed.classList.add(cls);
}
updateInfo();
});
</script>