1

I have a textbox on my website to make the text easier to read. I have an iframe on my website that was placed outside of my box on mobile devices. So I followed this tutorial to fix that. I'm trying to get my iframe video smaller on pc browsers and the current size in my code for mobile devices. It's too big on pc right now. Is there any way to do this?

HTML code:

<div class="video-container"><iframe src="https://www.youtube.com/embed/c0i88t0Kacs"></iframe>
</div>

CSS code:

.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden; }

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%; }
mkrieger1
  • 19,194
  • 5
  • 54
  • 65
Jack
  • 69
  • 1
  • 1
  • 11
  • Try to follow the answer from here using media queries: https://stackoverflow.com/questions/27227214/media-queries-not-working-inside-an-iframe – U Rogel Dec 04 '17 at 11:31

2 Answers2

4

you can use bootstrap or media query for this task , while using media query you have to give proper pixel for your device

bootstrap

<div class="container">
 <div class="row">
   <div class="col-sm-12">
   </div>
  </div>
</div>

media query

   @media screen and (max-width: 699px) and (min-width: 520px) {

  }
Shoyeb Memon
  • 1,119
  • 1
  • 11
  • 27
2

Just Add Media Query in your Css

for tablet

@media only screen and (max-width: 760px) {
.video-container {//set you width and height}

.video-container iframe, .video-container object, .video-container embed 
{//set you width and height }
}

for Mobile

@media only screen and (max-width: 480px) {
.video-container {//set you width and height}
.video-container iframe, .video-container object, .video-container embed 
{//set you width and height }

}

Rohit Gautam
  • 312
  • 2
  • 17
  • If I add "@media only screen and (max-width: 480px)" above the ".video-container", my screen is fully filled the video. How can I fix that? Sorry I'm new to HTML/CSS. – Jack Dec 04 '17 at 14:05
  • you have to add media query end of the css. – Rohit Gautam Dec 05 '17 at 03:50
  • It's working now! I forget to add .video-container with the width and height. Thanks! – Jack Dec 06 '17 at 11:06