You can use querySelector with the direct child operator >
(and maybe first with :first-child
if you have more than one child div) like this:
const videoContainer = document.querySelector('#videoContainer > div')
videoContainer.style.width = "150px"
videoContainer.style.height = "200px"
console.log("videoContainer width is", videoContainer.style.width)
/* what I think you need too */
#videoContainer video {
object-fit: contain;
}
<div id="videoContainer">
<div style="width: 640px; height: 360px"> <!------- target this -->
<video src="//samplelib.com/lib/preview/mp4/sample-5s.mp4"
preload="auto"
autoplay=""
style="width: 100%; height: 100%"></video>
</div>
</div>
object-fit: contain
will force you video to scale into its parent. You may want to use cover
or else. For more information, read simulate background-size:cover
on <video>
or <img>
You can target it by adding an id/class and pointing like this in the css #Idname or .Classname
like:
file.html:
<div id="videoContainer">
<div id="idname" class="classname" style="width: 640px; height: 360px">
//....
</div>
</div>
file.css:
#idname {
width: 640px;
height: 360px;
}
//OR
.classname {
width: 640px;
height: 360px;
}
or still with css like:
#videoContainer > div {
width: 640px;
height: 360px;
}
or with js:
const videoContainer = document.getElementById("videoContainer").firstChild; // or
const videoContainer = document.getElementById("videoContainer").childNodes[0]; //or
const videoContainer = document.querySelector('#videoContainer > div');
videoContainer.style.width = '640px';
videoContainer.style.height = '360px';
Here’s how it can be done. Hope that answers your question.
document.getElementById("videoContainer").children[0].style.background="red";
<div id="videoContainer">
<div style="width: 640px; height: 360px">
<h1>Your Content </h1>
</div>
</div>
You can use in this manner>>>>
document.getElementById(“your_element_id”).style.property = new style
I’m having difficulty targeting the child div of id="videoContainer"
and changing its style
<div id="videoContainer">
<div style="width: 640px; height: 360px"> <------- target this
<video
src=""
preload="auto"
autoplay=""
style="width: 100%; height: 100%"
></video>
</div>
</div>
const videoContainer = document.getElementById('videoContainer')
document.getElementById('videoContainer').children?.[0]?.setAttribute("style", `width: 150px; height: 200px;`);
Refactor, I’d like to up vote this, but you have added complexity.
Welcome to SO; you’re on the right track, but including the OP’s original code and solution in your answer is far more beneficial to them and you in terms of acceptance.
Your answer could be improved with additional supporting information. Please