How to manipulate the iframe css based on device size

Question

I\'m building this site and I\'m having trouble manipulating the iframe based on size of the device. Basically, what I want is if the use is on a tablet the video is one size bu

Answer 1

Try this:

.embed-container {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.27198%;
 background-size: cover;
 background-repeat: no-repeat;
   background-position: center center;
 }

.embed-container iframe {
 position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
 }

<div class='embed-container'><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwhereisslice%2Fvideos%2F1034464440067039%2F&show_text=0&width=560"></iframe></div>

more detail