CODEWITHSUNDEEP
htmlcssiframeyoutube
Dawid
Dawid

Reputation: 83

Youtube iframe on mobile, bad width

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;}

Upvotes: 4

Views: 11307

Answers (3)

Taiwotman
Taiwotman

Reputation: 905

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

Upvotes: 8

Tom
Tom

Reputation: 369

I have just checked you page - it seems like you facebook iframe has width="600px" which makes the page wider then it is and it adds blank space on the right - and leaves youtube iframe to stretch to that width <iframe name="f388722c584edd4" width="600px" height="150px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FXBwzv5Yrm_1.js%3Fversion%3D42%23cb%3Df1b19a710c55a68%26domain%3Dzaybee.pl%26origin%3Dhttp%253A%252F%252Fzaybee.pl%252Ff2c00c183120b2%26relation%3Dparent.parent&amp;container_width=1920&amp;height=150&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2FZaybeeInspiracje&amp;locale=pl_PL&amp;sdk=joey&amp;show_facepile=false&amp;small_header=false&amp;width=600" style="border: none; visibility: visible; width: 500px; height: 130px;" class=""></iframe>

change both inline style width="600px" and style="width:500px;" to width 100% that should fix it

Edit:

You should also loo into updating wrapping div of that facebook iframe as I can see that <div class="fb-page fb_iframe_widget"> has width as well

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

You can use this CSS to make YouTube iframe responsive on mobile and ipad 

.iframeVideo {
	height: 0px;
	padding-top: 25px;
	padding-bottom: 56.2%;
	position: relative;
}
.iframeVideo iframe {
	width: 100%;
	height: 100%;
	position: absolute;
}
<div class="iframeVideo">
<iframe src="https://www.youtube.com/embed/Jiji_1iosv4" frameborder="0" allowfullscreen></iframe>
</div>

Upvotes: 6

Related Questions