How to use actually use span to embed videos with twitter bootstrap?

Question

I need to embed a youtube clip within a webpage and I use twitter bootstrap. How does one correctly actually use span correctly to embed the video?

There are so many resolutions out there! For example, if I choose span8 for the video - it would be ~620 pixels wide iframe video. This may be an issue with even smaller resolutions.

Duplicate with: http://stackoverflow.com/questions/12166784/how-to-implement-a-responsive-youtube-embed-iframe-with-twitter-bootstrap — Bass Jobsen, May 21 '13 at 11:32

score 7 · Accepted Answer · edited May 23 '17 at 11:49

7

Set the width and height of the iframe relative to (100%) the containing div span*. Choose a span width which fits your design. If you enable the responsive features of twitter bootstrap, see: http://twitter.github.io/bootstrap/scaffolding.html#responsive the width of your span and so the iframe change with the resolution.

https://stackoverflow.com/a/12235638/1596547 shows how to make the size of the iframe responsive.

Example see: http://bootply.com/BassJobsen/61833

edited May 23 '17 at 11:49

Community

1
1

answered May 21 '13 at 11:32

Bass Jobsen

48,736
16
143
224

Awesome! That's exactly what I was looking for. – user428900 May 21 '13 at 17:52
Is there a similar solution for non-iframe – geoff Oct 12 '13 at 01:04
@geoff does this question: http://stackoverflow.com/questions/19101254/passing-data-to-bootstrap-modal-without-javascript/19203506 helps you? – Bass Jobsen Oct 12 '13 at 10:22
1

This is not working with bootstrap 3. Can anyone help with the same? – Feb 19 '14 at 21:26
if you replace the `span*` with `col-sm-*` i do not find a reason why it should not work? – Bass Jobsen Feb 19 '14 at 23:12

How to use actually use span to embed videos with twitter bootstrap?

1 Answers1