Youtube iframe on mobile, bad width

Question

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:

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

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

Answer 1

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>