responsive video iframe for mobile and laptop [duplicate] - html

Question

This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I'm trying to make a responsive template and I'm using iframes for youtube videos.
When i put a caption underneath the video it works fine on desktop, but when I go to responsive mobile mode there is big between caption and video.
Can any body help me to fix it, so that caption stay underneath the video regardless wether I'm on desktop or mobile.
Here is the link for my template:
http://www.sayarts.com/past-events.html

Answer 1

You are not using the right approach to make your videos responsive. Height for your videos remain fixed that's why their is huge gap between videos and caption on mobile phones.
To make the videos perfectly responsive, add the video inside a div like this:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
and then use the following CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can read more about it in this article

Answer 2

You can simply add this style to the wrapper element: height:auto, it seems to fix the problem.
#wrapper embed, #wrapper iframe {
max-width: 100%;
height: auto;
}
If you need more control use the responsive media queries, this is an example:
#media only screen and (max-width: 468px) {
body {
/*you specific styles*/
}
}