0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/docs/components/responsive-embed.md

31 lines
1.2 KiB
Markdown
Raw Normal View History

2014-07-13 09:59:31 +02:00
---
layout: page
title: Responsive embed
---
2014-07-13 10:17:54 +02:00
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Merge branch 'master' into derp Conflicts: Gruntfile.js dist/css/bootstrap-theme.css dist/css/bootstrap-theme.css.map dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css docs/_includes/components/dropdowns.html docs/_includes/components/media.html docs/_includes/components/navs.html docs/_includes/components/progress-bars.html docs/_includes/components/responsive-embed.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/less.html docs/_includes/css/overview.html docs/_includes/css/responsive-utilities.html docs/_includes/customizer-variables.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/grunt.html docs/_includes/getting-started/template.html docs/_includes/header.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/nav/components.html docs/_includes/nav/getting-started.html docs/_layouts/default.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/docs.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/components.html docs/components/navbar.md docs/css.html docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/examples/blog/index.html docs/examples/carousel/index.html docs/examples/cover/index.html docs/examples/dashboard/index.html docs/examples/grid/index.html docs/examples/jumbotron-narrow/index.html docs/examples/jumbotron/index.html docs/examples/justified-nav/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/offcanvas/index.html docs/examples/signin/index.html docs/examples/starter-template/index.html docs/examples/sticky-footer-navbar/index.html docs/examples/sticky-footer/index.html docs/examples/theme/index.html docs/examples/tooltip-viewport/index.html docs/getting-started.html docs/javascript.html docs/migration.html less/_animation.less less/_modal.less less/_navbar.less less/_variables.less less/glyphicons.less less/navs.less less/panels.less less/progress-bars.less
2014-10-27 06:31:59 +01:00
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
2014-07-13 10:17:54 +02:00
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
{% example html %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
{% endexample %}
Aspect ratios can be customized. There are two available in Bootstrap, 16x9 and 4x3 (two of the most common for video).
2014-03-17 03:03:53 +01:00
{% highlight html %}
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
Merge branch 'master' into derp Conflicts: Gruntfile.js dist/css/bootstrap-theme.css dist/css/bootstrap-theme.css.map dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css docs/_includes/components/dropdowns.html docs/_includes/components/media.html docs/_includes/components/navs.html docs/_includes/components/progress-bars.html docs/_includes/components/responsive-embed.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/less.html docs/_includes/css/overview.html docs/_includes/css/responsive-utilities.html docs/_includes/customizer-variables.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/grunt.html docs/_includes/getting-started/template.html docs/_includes/header.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/nav/components.html docs/_includes/nav/getting-started.html docs/_layouts/default.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/docs.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/components.html docs/components/navbar.md docs/css.html docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/examples/blog/index.html docs/examples/carousel/index.html docs/examples/cover/index.html docs/examples/dashboard/index.html docs/examples/grid/index.html docs/examples/jumbotron-narrow/index.html docs/examples/jumbotron/index.html docs/examples/justified-nav/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/offcanvas/index.html docs/examples/signin/index.html docs/examples/starter-template/index.html docs/examples/sticky-footer-navbar/index.html docs/examples/sticky-footer/index.html docs/examples/theme/index.html docs/examples/tooltip-viewport/index.html docs/getting-started.html docs/javascript.html docs/migration.html less/_animation.less less/_modal.less less/_navbar.less less/_variables.less less/glyphicons.less less/navs.less less/panels.less less/progress-bars.less
2014-10-27 06:31:59 +01:00
<iframe class="embed-responsive-item" src="..."></iframe>
2014-03-17 03:03:53 +01:00
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
Merge branch 'master' into derp Conflicts: Gruntfile.js dist/css/bootstrap-theme.css dist/css/bootstrap-theme.css.map dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css docs/_includes/components/dropdowns.html docs/_includes/components/media.html docs/_includes/components/navs.html docs/_includes/components/progress-bars.html docs/_includes/components/responsive-embed.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/less.html docs/_includes/css/overview.html docs/_includes/css/responsive-utilities.html docs/_includes/customizer-variables.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/grunt.html docs/_includes/getting-started/template.html docs/_includes/header.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/nav/components.html docs/_includes/nav/getting-started.html docs/_layouts/default.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/docs.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/components.html docs/components/navbar.md docs/css.html docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/examples/blog/index.html docs/examples/carousel/index.html docs/examples/cover/index.html docs/examples/dashboard/index.html docs/examples/grid/index.html docs/examples/jumbotron-narrow/index.html docs/examples/jumbotron/index.html docs/examples/justified-nav/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/offcanvas/index.html docs/examples/signin/index.html docs/examples/starter-template/index.html docs/examples/sticky-footer-navbar/index.html docs/examples/sticky-footer/index.html docs/examples/theme/index.html docs/examples/tooltip-viewport/index.html docs/getting-started.html docs/javascript.html docs/migration.html less/_animation.less less/_modal.less less/_navbar.less less/_variables.less less/glyphicons.less less/navs.less less/panels.less less/progress-bars.less
2014-10-27 06:31:59 +01:00
<iframe class="embed-responsive-item" src="..."></iframe>
2014-03-17 03:03:53 +01:00
</div>
{% endhighlight %}