Video too large in mobile

kugelmeier

.Hallo,

I had one support here in "Pictures too big in mobile". Now the video is to big. The video is with iframe src and starts from YouTube.

Now there is the following code in custom.css but the video looks always too big - how I get it smaller:

@media (max-width: 360px) { .logo { width: auto; }}

@media (max-width: 480px) {
#Mod118 .module-inner .custom img {
width: 100%; height:100%
}
}.custom img {max-width:100%; max-height:100%;}}

@media (max-width: 480px) {
#Mod118 .module-inner .custom iframe {
width: 100%; height:100%
}

saguaros

kugelmeier
Hi,

You can try with this custom CSS:

@media (max-width: 480px) {
    #Mod118 iframe {
        width: 100% !important;
    }
}

Regards

kugelmeier

Hi,

sorry, but there is no change. Please have a look in the custom.css

Regards
Klaus

saguaros

kugelmeier
Hi,

I edited a bit to:

@media (max-width: 992px) {
    #Mod118 iframe {
        width: 100% !important;
    }
}

and see that it's working fine now.

Try to clear browser's cache & cookies.

kugelmeier

Yes - thanks! In the module in front it seems ok. Is it also possible that the video gets proportional smaller like the images?

Sorry a second: In the content sides https://multispeed.de/index.php/wir-ueber-uns.html and insidehttps://multispeed.de/index.php/grillpfanne2.html
there is the same problem for mobile like on the start side.

Regards Klaus

aman204

kugelmeier You may try change this in custom.css file :

@media (max-width: 992px) {#Mod118 iframe {width: 100% !important;}}

@media (max-width: 992px) {#Mod118 iframe,video {width: 100% !important;}}

Kindly ensure to clear your browser cache if changes dont relect

kugelmeier

Hi,
yes, in the first url (content side) its now ok.

But in the second url - its a virtuemart product side - there is no change.

Regards Klaus

aman204

kugelmeier But in the second url - its a virtuemart product side - there is no change.

You may change this further :

@media (max-width: 992px) {#Mod118 iframe,video {width: 100% !important;}}

@media (max-width: 992px) {#Mod118 iframe,video,.productdetails-tabs iframe{width: 100% !important;}.productdetails-tabs iframe{height:100% !important;}}

kugelmeier

Yes thanks thats good!

Is this also possible on "Home" site (Module)? There starts the video in the large picture.

Regards Klaus

aman204

kugelmeier Is this also possible on "Home" site (Module)? There starts the video in the large picture.

For the respective video to appear proportionally right in responsive mode, You may change this :

@media (max-width: 992px) {#Mod118 iframe,video,.productdetails-tabs iframe{width: 100% !important;}.productdetails-tabs iframe{height:100% !important;}}

@media (max-width: 992px) {#Mod118 iframe,video,.productdetails-tabs iframe{width: 100% !important;}.productdetails-tabs iframe,#Mod118 iframe{height:100% !important;}}

Also, For reference, You can check out this tutorial

width: 100% and height: 100% make the iframe take all of the wrapper’s space.

kugelmeier

Yes, its not easy ... I did before without "#Mod118 iframe" because the proportions are not correct.

Another problem: My custom tells me, that the video is not seen on IPhone 7. He cleaned his cache and starts it new. Have you any idea?

Regards Klaus

paulus1031

Hi Klaus,

There are a few different methods for video sizing with pros and cons to them

Perhaps consider trying / testing this method

@media screen and (max-width:992px) {
#Mod118 {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;}

#Mod118 iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

}

With the iphone7 what exactly do they see? nothing at all? or the video not playing?

Cheers
Paul

kugelmeier

Hi,
thanks, but now the text and pictures over the video were away and only the video was seen in the module on front.
I did it back.

IPhone 7 - my custom tells me, that there was nothing to see, but on IPhone 8 and X I have seen the video...

Regards
Klaus

aman204

kugelmeier IPhone 7 - my custom tells me, that there was nothing to see, but on IPhone 8 and X I have seen the video...

As your issue specifically relates to Youtube video embedded through iFrame not showing on iPhone 7 in real-time, You may try the troubleshooting steps outlined here