B.I FLIX

B.I ORIGINALS

/* main event listener that waits for the page to load before running the script */ document.addEventListener('DOMContentLoaded', () => { /* select the main elements from the HTML */ const slider = document.querySelector('.gallery1-slider'); const prevButton = document.querySelector('.gallery1-prev-button'); const nextButton = document.querySelector('.gallery1-next-button'); const youtubeItems = document.querySelectorAll('.gallery1-youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); /* keeps track of the current position in the carousel */ let currentIndex = 0; /* next Button Functionality */ nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery1-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex + 1); /* move to the next item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the beginning */ if (currentIndex > maxIndex) {currentIndex = 0;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the next item */ }); /* previous Button Functionality */ prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery1-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex - 1); /* move to the previous item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the end */ if (currentIndex < 0) {currentIndex = maxIndex;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the previous item */ }); /* youtube video modal */ youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { /* closes the modal when close button is clicked */ videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { /* closes the modal when anywhere outside the video is clicked */ if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });

MUSIC VIDEOS

B.I - BTBT (feat. DeVita) (Performance Ver.)

B.I X Destiny Rogers X Tyla Yaweh - Got It Like That

/* main event listener that waits for the page to load before running the script */ document.addEventListener('DOMContentLoaded', () => { /* select the main elements from the HTML */ const slider = document.querySelector('.gallery2-slider'); const prevButton = document.querySelector('.gallery2-prev-button'); const nextButton = document.querySelector('.gallery2-next-button'); const youtubeItems = document.querySelectorAll('.gallery2-youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); /* keeps track of the current position in the carousel */ let currentIndex = 0; /* next Button Functionality */ nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery2-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex + 1); /* move to the next item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the beginning */ if (currentIndex > maxIndex) {currentIndex = 0;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the next item */ }); /* previous Button Functionality */ prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery2-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex - 1); /* move to the previous item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the end */ if (currentIndex < 0) {currentIndex = maxIndex;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the previous item */ }); /* youtube video modal */ youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { /* closes the modal when close button is clicked */ videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { /* closes the modal when anywhere outside the video is clicked */ if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });

PERFORMANCE VIDEOS

/* main event listener that waits for the page to load before running the script */ document.addEventListener('DOMContentLoaded', () => { /* select the main elements from the HTML */ const slider = document.querySelector('.gallery3-slider'); const prevButton = document.querySelector('.gallery3-prev-button'); const nextButton = document.querySelector('.gallery3-next-button'); const youtubeItems = document.querySelectorAll('.gallery3-youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); /* keeps track of the current position in the carousel */ let currentIndex = 0; /* next Button Functionality */ nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery3-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex + 1); /* move to the next item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the beginning */ if (currentIndex > maxIndex) {currentIndex = 0;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the next item */ }); /* previous Button Functionality */ prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery3-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex - 1); /* move to the previous item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the end */ if (currentIndex < 0) {currentIndex = maxIndex;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the previous item */ }); /* youtube video modal */ youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { /* closes the modal when close button is clicked */ videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { /* closes the modal when anywhere outside the video is clicked */ if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });

DANCE PRACTICE VIDEOS

/* main event listener that waits for the page to load before running the script */ document.addEventListener('DOMContentLoaded', () => { /* select the main elements from the HTML */ const slider = document.querySelector('.gallery4-slider'); const prevButton = document.querySelector('.gallery4-prev-button'); const nextButton = document.querySelector('.gallery4-next-button'); const youtubeItems = document.querySelectorAll('.gallery4-youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); /* keeps track of the current position in the carousel */ let currentIndex = 0; /* next Button Functionality */ nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery4-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex + 1); /* move to the next item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the beginning */ if (currentIndex > maxIndex) {currentIndex = 0;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the next item */ }); /* previous Button Functionality */ prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery4-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex - 1); /* move to the previous item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the end */ if (currentIndex < 0) {currentIndex = maxIndex;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the previous item */ }); /* youtube video modal */ youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { /* closes the modal when close button is clicked */ videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { /* closes the modal when anywhere outside the video is clicked */ if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });

CONCERTS AND FANMEETINGS

/* main event listener that waits for the page to load before running the script */ document.addEventListener('DOMContentLoaded', () => { /* select the main elements from the HTML */ const slider = document.querySelector('.gallery5-slider'); const prevButton = document.querySelector('.gallery5-prev-button'); const nextButton = document.querySelector('.gallery5-next-button'); const youtubeItems = document.querySelectorAll('.gallery5-youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); /* keeps track of the current position in the carousel */ let currentIndex = 0; /* next Button Functionality */ nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery5-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex + 1); /* move to the next item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the beginning */ if (currentIndex > maxIndex) {currentIndex = 0;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the next item */ }); /* previous Button Functionality */ prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery5-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex - 1); /* move to the previous item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the end */ if (currentIndex < 0) {currentIndex = maxIndex;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the previous item */ }); /* youtube video modal */ youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { /* closes the modal when close button is clicked */ videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { /* closes the modal when anywhere outside the video is clicked */ if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });

DRAMAS AND FILMS

/* main event listener that waits for the page to load before running the script */ document.addEventListener('DOMContentLoaded', () => { /* select the main elements from the HTML */ const slider = document.querySelector('.gallery6-slider'); const prevButton = document.querySelector('.gallery6-prev-button'); const nextButton = document.querySelector('.gallery6-next-button'); const youtubeItems = document.querySelectorAll('.gallery6-youtube-video'); const videoModal = document.getElementById('video-modal'); const videoFrame = document.getElementById('video-frame'); const closeButton = document.querySelector('.close-button'); /* keeps track of the current position in the carousel */ let currentIndex = 0; /* next Button Functionality */ nextButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery6-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex + 1); /* move to the next item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the beginning */ if (currentIndex > maxIndex) {currentIndex = 0;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the next item */ }); /* previous Button Functionality */ prevButton.addEventListener('click', () => { const allItems = document.querySelectorAll('.gallery6-slider > *'); const itemWidth = allItems[0].offsetWidth + parseInt(window.getComputedStyle(allItems[0]).marginRight) * 2; const visibleItemsCount = Math.round(slider.offsetWidth / itemWidth); currentIndex = (currentIndex - 1); /* move to the previous item */ const maxIndex = allItems.length - visibleItemsCount; /* loop back to the end */ if (currentIndex < 0) {currentIndex = maxIndex;} slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`; /* show the previous item */ }); /* youtube video modal */ youtubeItems.forEach(item => { item.addEventListener('click', () => { const videoUrl = item.querySelector('img').getAttribute('data-video-url'); if (videoUrl) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); videoFrame.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; videoModal.style.display = 'block'; } }); }); closeButton.addEventListener('click', () => { /* closes the modal when close button is clicked */ videoFrame.src = ''; videoModal.style.display = 'none'; }); videoModal.addEventListener('click', (e) => { /* closes the modal when anywhere outside the video is clicked */ if (e.target === videoModal) { videoFrame.src = ''; videoModal.style.display = 'none'; } }); });

profile

B.I / 비아이

Name : Kim Hanbin / 김한빈Debut : 2015 ~~October 01~~ September 15Solo Debut : 2021 June 01Fandom : IDFandom Colour :Lightstick : BINBONG

Labels

YG Entertainment, trainee
YG Entertainment, as member of iKON (2015 - 2019 June 12)
IOK Music (2020 - 2022)
131 (2021 February 26 - Present)

awards / recognitions

Pre-debut

Show Me the Money 3

B.I : “Be I” : first single from SMTM to top the charts

B.I and Bobby broke the idol-rapper stereotype

2014 Mnet Asian Music Awards

B.I and Bobby : first idol trainees to perform at MAMA

2018

10th Melon Music Awards : Songwriter of the Year - top earner in terms of royalties

2019

becomes full member of the Korea Music Copyright Association (KOMCA)

2020

appointed as Executive Director at IOK Company for IOK Music (resigned 11 October 2022)

founder of 131 Label, a subsidiary of IOK Music

2021

debuts as solo artist

“illa illa” : most viewed kpop male soloist debut MV in the first 24 hours with 12.7M views

2022

first Asian artist to feature in the GRAMMYs Global Spin series

131, formerly 131 Label, becomes an independent label

2023

becomes the cover of the inaugural issue of HIT! Magazine (Brazil)

first and only Korean artist to perform at Lollapalooza Berlin

headlined the first K-pop concert in Estonia in Tallinn on October 03 (it’s kind of a fun fact :)

Supersound Festival : Best Rapper of the Year

2024

Hanteo Music Awards 2023 : Special Award (Hip Hop)

2025

Supersound Festival : Super Global Hip-Hop Artist

2026

debuts as a music director for the film 'BOY'

+where to start

Listen to his demos!
Do NOT miss his b-sides and remixes or you're seriously missing out!
Read the English translation of each song at least once.

Here's a list of personal faves by playlist-ish.

DEMOS : Fairytale / Hawaii Love / At That Time

LOVE STREAMING : Midnight Blue / Remember Me / Blossom

LEGENwaitforitDARY : Waterfall / Flame / BTBT / Dare to Love

OLDIES BUT GOODIES : Numb / Cloud Thought

PARTY PEOPLE : To Die / Beautiful Life / Michelangelo

ROADTRIP JAMS : illa illa / The Island of Misfit Toys

SHOWER SESSIONS :

HANBIN AND CHILL : Re-birth / Middle with You

GUILTY PLEASURE : Got It Like That / Gray / Lover

CRIES IN HEARTBREAK :

THIS IS REMIX : Lost at Sea (illa illa 2)

UNDERDOGS : Then / Tasty

iKON : While in iKON, he was the main songwriter, composer and producer of the group. Check iKON discography for a list of his previous works.

studio albums

waterfall / 2021.06.01 / solo debut
to die for / 2023.06.01
wonderland / 2025.06.01

extended plays and single albums

midnight blue [love streaming] / 2021.03.19 / all proceeds from sales, streaming and copyright will be donated to support children in need through World Vision
got it like that / 2021.05.14
lost at sea (illa illa 2) / 2021.10.01
cosmos / 2021.11.11
btbt / 2022.05.13
love or loved [l.o.l] pt. 1 / 2022.11.18
ttm / 2023.04.27
love or loved part.2 / 2023.11.10
tadaima / 2024.03.12 / japanese
tasty / 2024.05.20

compilation albums

live albums

features / credits / others

2009

Indian Boy / MC Mong ft Duble Sidekick and B.I

2014

Be I / B.I / Lyrics and Composition
Born Hater / Epik High ft Beenzino, Verbal Jint, B.I, Mino, Bobby / Lyrics and Composition
Empty / Winner / Lyrics and Composition

2016

Whistle / Blackpink / Lyrics

2017

Last Scene / PSY ft Lee Sungkyoung / Lyrics
Bomb / PSY ft B.I and Bobby / Lyrics and Composition
Auto Reverse / PSY ft Tablo / Lyrics
Shut Up & Smash OST / iKON / Lyrics? and Composition