📅 最后修改于: 2023-12-03 15:13:41.492000 🧑 作者: Mango
The Bootstrap Embed-Responsive-4by3 is a class in Bootstrap that allows you to create responsive video or slideshow embeds that maintain their 4:3 aspect ratio on all devices. This means your videos or slideshow will look great on any screen size.
To use the Bootstrap Embed-Responsive-4by3 class, you simply need to add it to your HTML code. Here's an example:
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/your-video-id"></iframe>
</div>
In the code above, you can see that we've added the embed-responsive and embed-responsive-4by3 classes to our div element. We've also added an iframe element with the embed-responsive-item class as a child of our div.
By doing this, we're telling Bootstrap to create a responsive video embed that maintains a 4:3 aspect ratio on all devices. The src attribute of the iframe element specifies the URL of the video we want to embed.
You can customize your embeds further by adding additional options to the iframe element. Here are a few examples:
To add YouTube options to your embed, you can add query parameters to the src attribute of your iframe element. For example:
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/your-video-id?rel=0&showinfo=0" allowfullscreen></iframe>
In the code above, we've added the rel=0 and showinfo=0 query parameters to our YouTube iframe. The rel=0 parameter disables related videos from appearing at the end of the video, while the showinfo=0 parameter removes the video title and other metadata from the video.
To add Vimeo options to your embed, you can also add query parameters to the src attribute of your iframe element. Here's an example:
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/your-video-id?title=0&byline=0&portrait=0" allowfullscreen></iframe>
In this example, we've added the title=0, byline=0, and portrait=0 parameters to our Vimeo iframe. These parameters remove the video title, byline, and user portrait respectively.
Bootstrap Embed-Responsive-4by3 is a great class that allows you to create responsive video or slideshow embeds that maintain their 4:3 aspect ratio on all devices. By following the instructions above, you can easily add this class to your HTML code and customize your embeds with additional options.