Tutorial: How to embed Bilibili videos on cell phones highly adaptive

When embedding a video from a video website (e.g. Bilibili), it's common to run into problems with it displaying poorly on mobile devices. In this article, we'll teach you how to make a video maintain the correct aspect ratio and be highly adaptive on various devices with simple HTML and CSS.

Description of the problem

The default embedded video usually uses a fixed height (e.g. 600px), which can cause layout issues on cell phones, for example:

• The video height is too high or too low, affecting the viewing experience.
• The video cannot automatically adjust the height according to the screen width.

With the tutorials in this article, you will learn how to make the embedded video height adaptive to fit different screen sizes.

prescription

We will use a parent container in conjunction with the padding-bottom tips to implement responsive video embedding.

HTML and CSS code

Below is the full code example:

Original video:<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113648055881454&bvid=BV1nhBVYCE8A&cid=27329825162&p=1″ scrolling="no" border="0″ frameborder="no" framespacing="0″ allowfullscreen="true">

    <iframe
        src="https://player.bilibili.com/player.html?bvid=BV1nhBVYCE8A"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        width="100%"
        height="100%"
        allowfullscreen="true"
        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">

Code Details

1. Parent container (div)::
   • position: relative;: Ensure that child elements (iframes) can be positioned relative to the parent container.
   • width: 100%.: Make the width of the container occupy 100% of the parent element.
   • padding-bottom: 56.25%;: This is based on a 16:9 aspect ratio. You can adjust this value if your video ratio is different. For example, a 4:3 ratio would be padding-bottom: 75%;The
   • height: 0;: By padding-bottom Instead of fixing the height.
   • overflow: hidden;: Hide content that is outside the scope of the container.
2. Embedded video (iframe)::
   • position: absolute;: Let the iframe fill the parent container.
   • top: 0; left: 0; width: 100%; height: 100%.: Make the width and height of the iframe vary with the parent container.
   • Other attributes such as allowfullscreen respond in singing sandbox Interaction permissions for embedded videos are provided.

Procedure for use

1. Copy Code: Copy the above code into your HTML file.
2. Replace the video link: Will src="https://player.bilibili.com/player.html?bvid=BV1nhBVYCE8A" Replace it with the link to the video you want to embed.
3. Adjustment ratio (optional): If your video is not 16:9, you can modify the padding-bottom The value of the Example:
   • 4:3 ratio:padding-bottom: 75%;
   • 21:9 ratio:padding-bottom: 42.86%;
4. test effect: Save the file and then view it in your browser to make sure the video displays properly on your mobile device.

caveat

• cross-domain issue: Some video sites may have permission restrictions on embedding videos, so be sure to use the correct sandbox Properties.
• proportionality adjustment: Ensure that the correct video aspect ratio is entered, otherwise display problems may result.

Demonstration

Here's how the code looks on different devices:

PC Browser

mobile browser

In this way, you can easily make video embeds highly adaptive without additional JavaScript or complex layouts.

I hope this article has been helpful!