Scaling Object in responsive design - html

Question

what I am trying to accomplish is to make my object scale with my browser window. As I increase the browser the object just moves directly up instead of just staying in the same position and scaling with the browser. The video that I have the object on scales just fine it's the object on top that I am having problems with. If anyone has any suggestions that would really help. Thank you!
Here is a JsFiddle but I'm not sure how helpful it'll be.
https://jsfiddle.net/tad1jcxt/
HTML:
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
<h1 id="headline">Intermediate Web Design:
<br>
Fun, Insightful, Experience
</h1>
<object type="image/svg+xml" data="comweb2.svg" ></object>
</figure>
CSS:
object{
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
#headline{
text-align: center;
position: absolute;
top:10%;
left:35%;
color:#00E3FF;
line-height:20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size:12px;
}

Answer 1

The desired screen position of your <object> (containing a graphic) is 8.5% of the screen height from the top, and 32% of the screen width from the left hand side. However, the top and left CSS properties only apply to absolutely positioned elements; e.g., position: fixed or position: absolute. Therefore, simply add position: absolute to your CSS properties for the <object> and you're good to go.
object{
position: absolute;
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
I also strongly recommend that you not change the global definition of an <object> element in this case because it seems very specific to this instance. It is best to give your <object> an ID attribute and then use that to give it the CSS properties desired:
<style>
#logo{
position: absolute;
top:8.5%;
left:32%;
height: 100px;
width:200px;
}
</style>
<object id="logo" type="image/svg+xml" data="comweb2.svg" ></object>
For reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/left
https://developer.mozilla.org/en-US/docs/Web/CSS/top