Solution 1 :

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>

Solution 2 :

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';

Solution 3 :

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>

Solution 4 :

You can use in this manner>>>>

document.getElementById(“your_element_id”).style.property = new style

Problem :

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;`);

Comments

Comment posted by GrafiCode

document.querySelector('#videoContainer > div')

Comment posted by Cédric

first-child

Comment posted by minimal reproducible example

@Cédric in the

Comment posted by Madison Courto

Refactor, I’d like to up vote this, but you have added complexity.

Comment posted by aloisdg

Alright move

Comment posted by minimal reproducible example

@Joseph I dont have the undefined issue in my

Comment posted by Madison Courto

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.

Comment posted by habby

Thank you very much, ill edit the answer to better suite the OP question

Comment posted by edit

Your answer could be improved with additional supporting information. Please

By