Menu
I am using Bootstrap.
I have a text which contains 2 or 3 iframes based embed videos.
This data is fetched from database.
How can I make these iframes responsive?
Example Code:
<div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT <iframe src="http://youtube.com/...."></iframe> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT <iframe src="http://youtube.com/...."></iframe> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT <iframe src="http://youtube.com/...."></iframe> </div> </div> This is a dynamic data. How can I make it responsive?
218
In order to make your embedded iframe responsive, you need to wrap the iframe in a div and apply inline css. Follow these simple steps: Get the iframe embed code and paste in into your HTML page. Set the height and the width attributes of the iframe tag to 100%
Bootstrap's IFrame is an HTML document that is embedded in another HTML document on a web page. IFrames are used to insert content from other source. With the Bootstrap integration, you can put the content of the IFrame inside a modal to make it even more interactive and entertaining.
You will need to wrap the responsive youtube embed code with a div and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically. Awesome!
Bootstrap embeds is a utility which helps you to insert a video or slideshow in the page keeping width of the parent and scales on any device. Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .
With Bootstrap 3.2 you can wrap each iframe in the responsive-embed wrapper of your choice:
http://getbootstrap.com/components/#responsive-embed
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="…"></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="…"></iframe> </div> If you don't want to wrap your iframes, you can use FluidVids https://github.com/toddmotto/fluidvids. See demo here: http://toddmotto.com/labs/fluidvids/
<!-- fluidvids.js --> <script src="js/fluidvids.js"></script> <script> fluidvids.init({ selector: ['iframe'], players: ['www.youtube.com', 'player.vimeo.com'] }); </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
