Youtube iframe on mobile, bad width

user_7284738 0
Viewed 8233

I have on my page zaybee.pl problem with youtube iframes, when you look at the small window at the posts with youtube, everything works great - youtube width change to the width of window:

View on small windows on computer

But on mobile phone (Android, Google Chrome) iframe is bigger then the rest of webpage:

enter image description here

Rest of elements on page have good width. On a desktop testers how page look on mobile everything looks good. I don't know where is problem.

My pieces of code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

<div class="ytframe"><iframe width="100%" height="364" style="position:relative;z-index:100;" src="http://www.youtube.com/embed/'.$src['v'].'?wmode=transparent" frameborder="0" allowfullscreen></iframe></div>

.ytframe {width:calc(100% - 77px);height:400px;position:relative;}
youtube iframe css html
3 Answers

Put this in your CSS stylesheet(works perfectly like magic).

iframe[src*=youtube] {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                    padding-bottom: 10px;
                }

And your iframe can have a width(set as preferred) and height(set as preferred)

<iframe  src="YoutubeEmbeddedUrl"  width="560" height="315" frameborder="0" allow="autoplay; encrypted-media allowfullscreen"
      allowfullscreen></iframe>

Source

user_8445180
Related