Video Embedding - advice to change size/width/height of youtube embedded video

Prismic for Content Creators
1

Hello,

We've been trying to use the embed option for videos on Vimeo and Prismic - but unfortunately there are not apparent ways to adjust the frame look or size, so the embeds look a bit rough on our website. As it only accepts links, there is no way to adjust the media item.

Does anyone have any experience with this?

2

Hi Christina,

You can control the size of a youtube embed by adding &maxwidth=600 and/or &maxheight=400 to the end of the youtube url. Here’s an example:

https://www.youtube.com/watch?v=dQw4w9WgXcQ&maxwidth=300&maxheight=200

Let me know if this works for you!

3

Hey Phil, this is great to know, thanks!

Do you know if the frame can be adjusted/reduced as well?

ps - This link already made my morning :slight_smile:

4

I’m glad you enjoyed it :smiley:

Can you explain a little further what you mean by the frame?

5

Sure! On Squarespace for example, the embed comes without a frame around it, just the video frameless almost with the play button, which looks nice and clean:

image
image1646×906 227 KB

7

I believe this is a Squarespace specific enhancement and not something that's currently available with youtube video query parameters.

10

this won't worked for me actually height & width remains same what's the other option
Screenshot 2024-03-05 at 10.26.11 AM

11

i'm having a problem with adjusting height and width to embedded video. i want to adjust this video within this red box, any suggestion?

13

Hi Yash,

I would need more information here about how you are adding the URL, to which field and how you are templating it in your project.

The final 'templating' part is most likely how you would control this; for that, I need your code and framework.

Thanks.

15

For reference, size of embedded videos can be controlled via CSS directly.

This is an example on a NextJS project, where .video is the embedded video's parent container.

.video {
  position: relative;
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden;
  width: 100%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
1 Like