ememk Mar 17, 2021 · 9:08 pm #15482 Is there a way to set the width and height of the video block in the page code editor? The size of the video (mp4) is too large and I would like to change the width and height. I know how to do it with Youtube embeds, but not in the code editor that looks like this:
<!– wp:video {“id”:2945} –>
<figure class=”wp-block-video”><video controls src=”http://websitename.com/wp-content/uploads/2021/03/videoname.mp4″></video></figure>
<!– /wp:video –>
I want the video to be at most width=”560″ height=”315″
Do I need to adjust it using CSS? I tried:
.stackItem {
width: 50%;
height: 50%;
}
I tried:
.stackItem {
max-width: 560px;
max-height: 315px;
}
Neither worked
Andrew Misplon Puro Mar 18, 2021 · 10:05 am #15483 Hi, thanks for reaching out.
I’m not sure about the Block Editor. It’s possible to set the width and height using the video shortcode as seen here https://www.ostraining.com/blog/wordpress/video-size/.
ememk Mar 18, 2021 · 8:41 pm #15484 I used the shortcode block and input the information in the way recommended in the link you posted, but the video doesn’t display live. Here is what I put into both an HTML block and in a shortcode block and neither worked.
[video width="560" height="315" http://websitename.com/wp-content/uploads/2021/03/videoname.mp4%5D
We don’t want to embed a Youtube video (where I can set the size in the html) since it always shows ads and other video options we cannot control when the video completes.
ememk Mar 18, 2021 · 8:43 pm #15485 The shortcode didn’t display right in my post above it actually ends .mp4] not 4%5D.
ememk Mar 18, 2021 · 9:18 pm #15486 I’ve put the video block within column block and then used additional CSS in the column block to set the max width and max height to meet my criteria so now the video is the right size. However, I selected the video and chose to center it, but it isn’t centering it live. Any ideas on how to fix that?
ememk Mar 18, 2021 · 9:33 pm #15487 This reply has been marked as private.
Andrew Misplon Puro Mar 19, 2021 · 9:44 am #15489 Thanks. You can perhaps try in Appearance > Custom CSS or Customize > Additional CSS:
.videocol {
margin: 0 auto;
}
Andrew Misplon Puro Mar 20, 2021 · 10:50 am #15495 Glad to hear that helped 🙂