Problems with YouTube iframe

[emilia.lahti]

Hi,

I am having problems with a youtube iframe that I have embedded on the home page of my domain. My domain URL is https://www.valkonverstas.fi/. The video has been embedded in Appearance – Section 1 with the following code:

<div class=”video-container”><iframe src=”https://www.youtube.com/embed/L-JM0bx0RKo?rel=0″ width=”854″ height=”480″ frameborder=”0″ allowfullscreen=””></iframe></div>

The custom CSS I have inserted under Appearance – Basic settings is following:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 12px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
margin: 0 auto;
display: block;
top: 0;
width: 75%;
height: 75%;
}

The problems I have with this:
– How can I center the video? Currently it is positioned in the left.
– How can I make the margin smaller? There is currently a lot of empty space underneath the video.
– When I change the video size it changes both on desktop and mobile. On desktop the size is good now, however on mobile it is way too small. How can I change the size on mobile to be larger?

Thanks for your help!

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

.video-container { height:auto; padding-bottom:0; padding-top:0;}
.video-container iframe { position:relative; height:500px;}

@media screen and (max-width:767px) {
.video-container iframe { width:100%; height:350px;}
}

Regards,
Dave

[emilia.lahti]

Hi Dave,

Thanks for your help! The iframe size on mobile is still as small as before even after adding the custom CSS. Could it be that the earlier CSS I had inserted is messing with it? Could you have another look, please?

Thanks and kind regards,
Emilia

[Sonnal S Sinha]

Hi,

Can you send us the screenshot of your issues? Upload your screenshot on http://imgur.com/ and paste the share url here.

Regards,
Dave

[Author]

Posts