How to Add Bilibili Videos to My Portfolio: 3 Steps (2026)
TL;DR
Bilibili videos can be added to your portfolio through three main methods: pasting a URL on a platform with native Bilibili support, manually copying the embed code from Bilibili’s share button, or using a third-party embed generator. The biggest pitfalls are mobile responsiveness (Bilibili’s default embed breaks on smaller screens) and geo-restrictions that may prevent international recruiters from viewing your content. This guide covers every term you need to know and walks through each method.
Why Bilibili Videos Belong in Your Portfolio
Bilibili, often called “B站” (B Site), is the dominant video community in China. In Q4 2025, the platform reported 113 million daily active users and 366 million monthly active users. What makes this relevant for portfolios: roughly 60% of Bilibili’s users are between 18 and 24 years old, mostly university students and recent graduates entering the job market.
These creators, animators, educators, tech reviewers, and developers are building impressive bodies of work on Bilibili. But when they apply for jobs internationally, they hit a wall. Most portfolio platforms only support YouTube and Vimeo natively. Bilibili gets treated as an afterthought.
If you publish content on Bilibili and need recruiters, clients, or collaborators to see it, understanding how to add Bilibili videos to your portfolio is not optional. It is the difference between a complete professional presence and a fragmented one.
For bilingual creators working across English and Chinese, KnolMe supports Bilibili embeds alongside YouTube and Spotify, with rich embed functionality and no custom code required.
Key Bilibili Terms Defined
Before getting into the technical steps, you need to understand a few platform-specific concepts. These will come up repeatedly when you’re working with embed codes and portfolio builders.
Bilibili (B站)
Bilibili is China’s largest user-generated video community. It started in anime, comics, and gaming culture but has expanded into education, music, lifestyle, technology, and live streaming. Its signature feature is danmu (more on that below), the scrolling comments that fly across the video as viewers react in real time. Think of it as YouTube’s Chinese counterpart, but with a younger, more interactive audience and a distinctive visual culture.
BV Number
The BV number is Bilibili’s primary video identifier. Introduced in March 2020, it replaced the older AV number system. A BV number consists of the prefix “BV” followed by a 10-character alphanumeric string mixing uppercase letters, lowercase letters, and digits.
Example URL: https://www.bilibili.com/video/BV1xx411c7mD
When you need to find a specific video’s embed code or share it on your portfolio, the BV number is what you’ll be working with.
AV Number
The AV number is the legacy numeric identifier that Bilibili used before BV numbers. It looks like av170001 in the URL. The two systems remain bidirectionally compatible, meaning an old AV link will still redirect to the correct video. You don’t need to worry about converting between them, but knowing both formats exist helps when troubleshooting old links.
Danmu (弹幕 / Bullet Comments)
Danmu are the scrolling text overlays that appear on Bilibili videos as viewers comment in real time. They’re a core part of the viewing experience on the platform. In embedded players, danmu may still appear by default. This can confuse non-Chinese-speaking recruiters viewing your portfolio, so it’s worth knowing you can toggle them off in the player settings.
b23.tv Short Link
Bilibili offers a URL shortener at b23.tv for sharing. These shortened links look like https://b23.tv/[ID]. They redirect to the full Bilibili video page. Some embed tools accept short links, but for manual embedding, you’ll generally want the full URL with the BV number.
Embedding Terms Explained
This is where most people get stuck. Understanding these four concepts will save you hours of frustration when figuring out how to add Bilibili videos to your portfolio site.
Embed Code (嵌入代码)
The embed code is an HTML snippet that Bilibili generates so you can display a playable video on an external website. On the video playback page, click the Share button (labeled “分享” in the Chinese interface). In the popup window, click the Embed button (labeled “嵌入代码”) at the bottom. You’ll get an iframe code that looks like this:
<iframe src="//player.bilibili.com/player.html?aid=3787944&bvid=BV12s411X7z3&cid=6078845&page=1" ...>
Copy this code and paste it into your portfolio builder’s HTML or embed module. That’s the core mechanic.
Iframe
An iframe is the HTML element that hosts Bilibili’s video player on another website. Think of it as a window cut into your portfolio page that shows Bilibili’s player. Most portfolio builders have an “embed” or “HTML” block where you can paste iframe code. If yours doesn’t, you may need a platform that handles this natively. Our guide on embedding media in portfolio pages covers the general principles.
Responsive Embed
This is the single biggest technical pitfall when embedding Bilibili videos, and almost nobody talks about it. Bilibili’s default embed code is not responsive. The iframe height is fixed, which means it looks fine on desktop but breaks on mobile devices. Given that recruiters often review portfolios on their phones, this matters.
The fix is a CSS wrapper using the padding-bottom technique for a 16:9 aspect ratio:
.bilibili-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.bilibili-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Wrap your Bilibili iframe inside a <div class="bilibili-wrapper"> and the video will scale properly across screen sizes. If you’re using a no-code platform with native Bilibili support, this is handled automatically.
Geo-Restriction
Here’s something no competing guide mentions: some Bilibili content is region-locked. The original version of Bilibili is not fully available outside China due to geo-restrictions on certain content. International users see a curated selection rather than the full library.
The practical implication: if you embed a Bilibili video on your portfolio and a recruiter in the US or Europe visits, some videos may not play. Before adding any video to your portfolio, open it in a browser without a VPN (or ask someone outside China to test it) to confirm it loads internationally. If it doesn’t, maintain a YouTube mirror of that content.
Portfolio Platform Terms
Rich Embed
A rich embed means you paste a Bilibili URL and the platform automatically renders it as a playable video player. No iframe code, no HTML editing, no CSS wrappers. This is the fastest way to add Bilibili videos to a portfolio. KnolMe supports rich embeds for Bilibili, YouTube, and Spotify, letting you showcase projects with drag-to-reorder and multiple layouts.
Portfolio Embed (Manual)
On platforms like Adobe Portfolio, Squarespace, or WordPress, Bilibili embedding requires manual work. You’ll need to find the embed or HTML module, paste the iframe code, and add the responsive CSS wrapper yourself. Practitioners on Adobe forums have expressed frustration with this workflow, with one user asking whether Adobe “missed the mark on making a one-pager possible” given the limitations of its embed module.
Custom Domain
A custom domain means using your own URL (like yourname.com) for your portfolio instead of a platform subdomain. This matters for professional credibility. For more details, our custom domain setup guide explains costs and configuration steps.
AI Profile / Digital Twin
A newer concept in portfolio building: an AI-powered personal page where visitors can interact with a chatbot trained on your work and background. For Bilibili creators, this means a recruiter could ask your AI twin about a specific video project and get an informed answer. Our guide to AI digital twins explains how this works in practice.
Three Methods to Add Bilibili Videos to Your Portfolio
Now for the actual steps. There are three approaches, ranked from simplest to most involved.
Method 1: Paste a URL on a Platform with Native Bilibili Support
This is the easiest path. On platforms that support Bilibili rich embeds, you simply paste the video URL and the platform does the rest.
Steps:
- Go to your Bilibili video and copy the URL from your browser’s address bar (it should contain a BV number).
- In your portfolio editor, add a new media or project block.
- Paste the URL.
- The platform auto-renders the video as a playable embed.
- Drag to reorder if needed, and publish.
This method avoids all the responsiveness and iframe headaches. KnolMe’s free tier supports this workflow with Bilibili, YouTube, and Spotify embeds out of the box. HeyBoss is another no-code builder that supports Bilibili embedding for Chinese-speaking audiences.
Method 2: Copy the Embed Code and Use an HTML Module
This is the standard approach for traditional website builders like WordPress, Squarespace, or Adobe Portfolio.
Steps:
- Navigate to your Bilibili video page.
- Click the Share button (分享) below the video player.
- In the popup, click the Embed Code button (嵌入代码).
- Copy the entire iframe snippet.
- In your portfolio builder, add an HTML, Code, or Embed block.
- Paste the iframe code.
- Wrap it in the responsive CSS container described above.
- Preview on both desktop and mobile to verify proper display.
- Publish.
A Moodle forum user reported that an embedded Bilibili video “worked in the forum but when I try it on my local setup it is just frozen.” This inconsistency across platforms is common with Method 2. Always test your embed in an incognito browser window after publishing.
Method 3: Use a Third-Party Embed Generator
If you’re uncomfortable editing HTML, services like Iframely and embedcodesgenerator.com can generate responsive embed codes from a Bilibili URL.
Steps:
- Copy your Bilibili video URL.
- Go to your chosen embed generator (Iframely offers responsive codes specifically for Bilibili).
- Paste the URL.
- Copy the generated embed code.
- Paste it into your portfolio’s embed module.
- Test and publish.
BiliFix (vxbilibili.com) is another option originally designed for embedding Bilibili links in Discord and Telegram. It supports videos, anime series, live streams, and user profiles. For portfolio purposes, Iframely tends to produce cleaner, more standards-compliant code.
Common Pitfalls and How to Avoid Them
Knowing how to add Bilibili videos to your portfolio is only half the battle. These are the problems that trip people up after embedding.
Mobile Responsiveness
The most common issue. Bilibili’s default embed uses fixed pixel dimensions. On a phone screen, the video either gets cut off or creates a horizontal scrollbar. Always use the responsive CSS wrapper from the section above, or choose a platform that handles responsiveness automatically.
Geo-Blocking
Test every video you embed from a location outside China, or have a friend test it. If a video is region-locked, your international recruiter will see a blank player or an error message. The safest approach: upload important portfolio pieces to both Bilibili and YouTube, then embed whichever works for your target audience. If you need to build a portfolio that works across regions, our recruiter-focused portfolio guide covers best practices.
Thumbnail Control
Practitioners on Drupal forums report that controlling the poster/thumbnail image for Bilibili embeds is difficult. One developer noted that a “BiliBili video displays in an iframe without any problem, however I’m having difficulty attaching a video poster.” Unlike YouTube, where you can set a custom thumbnail that shows before playback, Bilibili’s embed pulls its own thumbnail automatically. If the auto-selected thumbnail doesn’t represent your work well, consider adding a static screenshot above the embed with a label explaining what the video contains.
Danmu Overlay Confusing Viewers
Bullet comments are a core part of Bilibili culture, but non-Chinese viewers may find a wall of scrolling text distracting or confusing. You can toggle danmu off in the embedded player by clicking the danmu button (弹) in the player controls. Some embed parameters also allow you to disable danmu by default. For a professional portfolio, turning them off is usually the right call.
Video Selection
A content strategy perspective worth considering: your portfolio acts as a catalog of your best work, not your complete work. Pick 3 to 4 of your strongest Bilibili videos rather than embedding everything. Quality over quantity signals professionalism. As one writer on Substack put it, your portfolio “should be tailored toward the opportunities you’re looking for.”
Choosing the Right Approach for Your Situation
The best method depends on your technical comfort and what you’re building.
Choose Method 1 if you want the fastest, least technical path. Platforms with native Bilibili support handle responsiveness, player rendering, and layout automatically. This is ideal for students, non-technical creators, and anyone who wants to ship a portfolio quickly.
Choose Method 2 if you’re already building on WordPress, Squarespace, or a similar platform and just need to add a few Bilibili videos to an existing site. Be prepared to write a small amount of CSS.
Choose Method 3 if you need responsive embeds but don’t want to touch CSS at all. The third-party generator handles the responsive wrapper for you, though you’ll still need a platform that accepts custom HTML.
A developer on DEV Community captured the underlying frustration well: “GitHub is just code, LinkedIn is too text-heavy, Dribbble/Behance? Mostly for visual design.” Video creators on Bilibili face the same fragmentation problem. The goal is finding one place where your Bilibili content, alongside your other work, lives as a coherent professional story.
You can see example profiles with media embeds to get a sense of what a finished portfolio with video content looks like.
Frequently Asked Questions
Do I need a Bilibili account to embed videos on my portfolio?
No. For public Bilibili videos, the embed code works without requiring viewers or the portfolio owner to log in. You do need to access the video page to copy the embed code, but the embedded player itself is accessible to anyone (subject to geo-restrictions).
Will my Bilibili videos play for recruiters outside China?
It depends on the specific video. Some Bilibili content is region-locked, and international viewers may see an error instead of your video. Test each embedded video from outside China before finalizing your portfolio. If a video doesn’t load internationally, upload it to YouTube as a backup.
Can I show both YouTube and Bilibili videos on one portfolio page?
Yes. Most platforms that support custom embeds can display both. Platforms with native rich embed support for multiple video services make this especially easy. If you’re working across both platforms, mixing them on a single page actually demonstrates broader reach.
What is the simplest way to build a portfolio with Bilibili support?
Use a platform that supports Bilibili rich embeds natively. With KnolMe, you paste a Bilibili URL and it renders automatically as a playable embed with drag-to-reorder layouts. The free tier includes one profile, which is enough to get started. For additional features like custom domains and private access control, the Pro plan runs $2.99 per month.
How do I make a Bilibili embed responsive on mobile?
Wrap the iframe in a container div with position: relative and padding-bottom: 56.25%, then set the iframe to position: absolute with 100% width and height. This maintains a 16:9 aspect ratio across all screen sizes. Or use a platform or third-party generator that handles this automatically.
Should I turn off danmu (bullet comments) in my portfolio embeds?
For portfolios targeting international or non-Chinese-speaking audiences, yes. Danmu can obscure the video content and confuse viewers unfamiliar with the feature. You can disable it in the player controls or through embed parameters.
Can I use Bilibili short links (b23.tv) for embedding?
Some embed generators accept b23.tv short links, but for manual embedding, use the full URL with the BV number. The full URL gives you reliable access to the embed code through Bilibili’s share interface, and it avoids potential redirect issues.
How do I control which thumbnail shows for my embedded Bilibili video?
This is a known limitation. Unlike YouTube, Bilibili’s embed pulls its thumbnail automatically, and there’s no straightforward way to override it. If the auto-selected thumbnail doesn’t showcase your work well, add a descriptive title or a static image above the embed to set context for visitors.
For more portfolio tips and guides, explore the KnolMe blog.