CODEWITHSUNDEEP
htmlcsswordpresshtml5-video
Daniel S
Daniel S

Reputation: 113

Changing or defining default height and width of self hosted wordpress videos

I am manually uploading videos to my Wordpress site, I upload them and use the video blocks function on the post page to embed them in the posts. After I open the post the videos are not in the container. The width x height is 1900x800px, its running from left to right covering the whole sidebar and at the bottom covering the related posts area.

I want the videos to have a default height (for all videos). When I inspect element to check for the elements so I can use custom css to fix it, it shows the following

<video controls="" src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video>

I tried using the following custom css (one by one)

.video {
    width: 100px;
    height: 250px;
}

.video src {
    width: 100px;
    height: 250px;
}

.video control src {
    width: 100px;
    height: 250px;
 }

but none of these change anything and the video player still is the same.

There are no css classes, the wordpress posts page html shows this

<figure class="wp-block-video"><video controls src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video></figure>

Upvotes: 0

Views: 1539

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

The problem is that you are not using CSS selectors correctly. You are using .video to try to select the <video> element.

  • To select an element, use just the element tag name, e.g. video, div, p etc
  • To select a class, precede the class name with a . e.g. .myvideoclass
  • To select an element that has a specific class, use both the element tag name and class (without as space between them) e.g. video.myvideoclass

So in your case, you would use:

video {
    width: 100px;
    height: 250px;
}

If you wanted to use a class, you can add a class to the video element in the html (without the .) and then select the class in the CSS with the . e.g.

<video class="myvideoclass" controls="" src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video>

/* select any element with the class "myvideo" */
.myvideoclass{
    width: 100px;
    height: 250px;
}

/* Or to select ONLY video elements with the class "myvideo" */
video.myvideoclass{
    width: 100px;
    height: 250px;
}

I suggest you do some online tutorials about CSS it understand how yo use it, this one is a good starting point: Mozilla Developer CSS tutorial

Upvotes: 1

Related Questions