Reducing responsive video size

Support
#1

Hello,

I embedded a youtube video on my website but it is appearing in full screen.
How to change the size of the responsive video to the half?
I am using this code
[x_video_embed][/x_video_embed]

#2

Hi there,

The width and the height of the embedded object is dependent to the iFrame code inside. For example:

[x_video_embed]<iframe src="http://player.vimeo.com/video/67051688" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>[/x_video_embed]

In the code above the width of the iFrame is 500, so it will not get bigger than that, but if the browser window is smaller than 500px it will take up the whole width. So add a width to the iFame code.

Your code is stripped out as you did not use the markdown. To show the code in the forum post you need to wrap the code inside this character: ```

Thank you.

#3

I used this code.
[x_video_embed]</span><iframe width="500" height="281" src="https://www.youtube.com/embed/tRcMAwK8K1Q" frameborder="0" allowfullscreen="allowfullscreen"></iframe><span style="color: #0000ff;">[/x_video_embed]</span>

The video size is full screen. I want to show half of the video size on the screen. Which code i will use?

rgds

#4

Hi,

You can try this code instead.

[x_video_embed]<iframe style="width:500px !important;margin:0 auto;" src="https://www.youtube.com/embed/tRcMAwK8K1Q" frameborder="0" allowfullscreen="allowfullscreen"></iframe>[/x_video_embed]

Change 500px to your desired width.

Hope that helps.

#5

Hello,

This code i cutting a part of the video. I want to reduce the video size but keeping the same ratio between width and height without hiding part of the video. In other words the container of the video is still big. check https://tarekrabaa.com/ar/

Rgds

#6

Hi there,

Now that you gave us the actual URL of the website which the embeded video is there it gave us a better idea of the situation.

Kindly get rid of whatever we suggested before and add the CSS code below to X > Launch > Options > CSS:

.home .x-video.embed.with-container {
    width: 50%;
    margin: auto;
}

That will do the trick, feel free to change 50% in the code to whatever size you like to have on the screen.

Thank you.

#7

Hello,

It works on big screens but i don’t want this code to affect the mobile screen. In other term, I want to reduce the size on Laptop only and to keep it full screen on mobile. Can i do this?

#8

Hi there,

Sure, let’s limit the affected device by changing it to this

@media ( min-width: 980px ) {

.home .x-video.embed.with-container {
width: 50%;
margin: auto;
}

}

Hope this helps.

#9

Hello,

I used max-width instead of min-width,
It works

Many Regards

#10

We are delighted to assist you with this.

Cheers!

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.