CODEWITHSUNDEEP
htmlcsstwitter-bootstrapiframe
SatyaTNV
SatyaTNV

Reputation: 4135

bootstrap 3 Iframe resizing

I'm using bootstrap 3 in one of my application. If I use width="80%" height="420" then my video comes with perfect size in large screens. But it is not working as responsive in small screens (mobiles) because of height="420". So that I used class="embed-responsive-item" with iframe. Again same problem iframe is not working as responsive. Any suggestions please. I'm not familiar with css. Here is some stuff.

<div class="wrapper">
<aside class="right-side">
<section class="content">               
    <div class="row">
        <div class="col-xs-9">
        <div style="background-color: #ffffff;text-align:center;padding:1%;" id="tmp">
        <iframe id="crntplay" width="80%" height="420" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
        <div class="row">
<div class="col-md-8"><span id="crntplaytitle" style="margin-left:15%;text-align:left;display: block;font-size:14pt;font-weight:bold;">title</span></div>

<div class="col-md-2"><span id="crntplayviews" style="text-align:right;display: block;font-size:14pt;font-weight:bold;">views</span></div>
</div>
</div>
</div>
</div>
</section><!-- /.content -->

Upvotes: 0

Views: 692

Answers (1)

Mike
Mike

Reputation: 345

iframe can't be responsive. Just the contents in them. You could use jquery to resize the iframe based on screen resolution

Adjust width and height for iframe depending on screen size

Upvotes: 1

Related Questions