Responsive iframe using Bootstrap

Question

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    lt div class  row  gt       lt div class  col-lg-12 col-md-12 col-sm-12  gt        SOME TEXT SOME TEXT SOME TEXT SOME TEXT      SOME TEXT SOME TEXT SOME TEXT SOME TEXT        lt iframe src  http   youtube com       gt  lt  iframe gt        SOME TEXT SOME TEXT SOME TEXT SOME TEXT      SOME TEXT SOME TEXT SOME TEXT SOME TEXT        lt iframe src  http   youtube com       gt  lt  iframe gt         SOME TEXT SOME TEXT SOME TEXT SOME TEXT      SOME TEXT SOME TEXT SOME TEXT SOME TEXT        lt iframe src  http   youtube com       gt  lt  iframe gt        lt  div gt    lt  div gt    This is a dynamic data  How can I make it responsive

User · Answer

So  youtube gives out the iframe tag as follows     lt iframe width  560  height  315  src  https   www youtube com embed 2EIeUlvHAiM  frameborder  0  allowfullscreen gt  lt  iframe gt    In my case  i just changed it to width  100   and left the rest as is  It s not the most elegant solution  after all  in different devices you ll get weird ratios  But the video itself does not get deformed  just the frame

User · Answer

Working during August 2020  use this  lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 quot  gt   lt link rel  quot stylesheet quot  href  quot https   maxcdn bootstrapcdn com bootstrap 3 4 1 css bootstrap min css quot  gt   lt script src  quot https   maxcdn bootstrapcdn com bootstrap 3 4 1 js bootstrap min js quot  gt  lt  script gt   use one aspect ratio  lt div class  quot embed-responsive embed-responsive-4by3 quot  gt     lt iframe class  quot embed-responsive-item quot  src  quot     quot  gt  lt  iframe gt   lt  div gt   within iframe use options   lt iframe class  quot embed-responsive-item quot  src  quot     quot    frameborder  quot 0 quot      style  quot        overflow  hidden        overflow-x  hidden        overflow-y  hidden        height  100         width  100         position  absolute        top  0px        left  0px        right  0px        bottom  0px       quot      height  quot 100  quot      width  quot 100  quot     gt  lt  iframe gt

User · Answer

Please  Check this out  I hope it s help   lt div class  row  gt    lt iframe class  col-lg-12 col-md-12 col-sm-12  src  http   www w3schools com  gt    lt  iframe gt   lt  div gt

User · Answer

Option 3  To update current iframe     iframe   wrap   lt div class  embed-responsive embed-responsive-16by9   gt        iframe   addClass  embed-responsive-item

User · Answer

Option 1  With Bootstrap 3 2 you can wrap each iframe in the responsive-embed wrapper of your choice   http   getbootstrap com components  responsive-embed   lt  -- 16 9 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-16by9  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt    lt  -- 4 3 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-4by3  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt    Option 2  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       lt  -- fluidvids js -- gt       lt script src  js fluidvids js  gt  lt  script gt       lt script gt      fluidvids init         selector    iframe          players    www youtube com    player vimeo com                lt  script gt

User · Answer

The best solution that worked great for me  You have to  Copy this code to your main CSS file   responsive-video       position  relative      padding-bottom  56 25       padding-top  60px  overflow  hidden      responsive-video iframe   responsive-video object   responsive-video embed       position  absolute      top  0      left  0      width  100       height  100      and then put your embeded video to  lt div class  quot responsive-video quot  gt       lt iframe  gt  lt  iframe gt   lt  div gt   That   s it  Now you can use responsive videos on your site

[twitter-bootstrap] Responsive iframe using Bootstrap

Examples related to twitter-bootstrap

Examples related to iframe