그만큼 ElementsKit YouTube Feed widget lets you connect your WordPress site with YouTube using the official YouTube Data API v3. Display your channel, playlist, or search results directly inside Elementor with full layout control, live statistics, and custom playback options.

전제조건 #

Before you start using the ElementsKit YouTube Feed widget, make sure you have:

• 워드프레스 사이트 with the latest version installed and activated.
• 요소 페이지 빌더 (free version is enough) installed and activated.
• ElementsKit 프로 installed and activated on your site.

• Google account to access Google Cloud Console for generating your YouTube Data API key.
• YouTube Channel ID, Playlist ID, or a Search Query depending on your feed source.

Step 1: How to Insert the YouTube Feed Widget #

Open the page or post where you want to add the YouTube feed in the Elementor editor.

• On the left widget panel, search for YouTube Feed.
• Drag the widget onto your page canvas where you want the feed to appear.

Once dropped, the widget shows an “Access token field is empty” message. This is expected — you’ll add your access token in the next step.

Step 2: How to Generate YouTube Access Token #

To display your YouTube content, you need a YouTube Data API v3 key from Google Cloud Console.

Start by going to Google Cloud Console and log in with your Google account. Click 프로젝트 생성 at the top, give your project a name (e.g., “ElementsKit YouTube Feed”), and click 만들다.

From the left sidebar, navigate to APIs & Services → Library. Search for YouTube Data API v3, click on it, and hit 할 수 있게 하다.

Once enabled, go to APIs & Services → Credentials from the sidebar. Click Create Credentials at the top and select API 키 from the dropdown. Your YouTube Data API key will be generated instantly — click 복사 to copy it.

Return to your Elementor editor and paste the API key into the Access Tokens field of the YouTube Feed widget settings. Your YouTube feed will now load with your channel data.

Step 3: Configure Content Tab Settings #

With the widget selected, click the 콘텐츠 탭 in the left panel and expand the 콘텐츠 부분.

Start by selecting your Layout Style — Grid for a clean symmetric grid, Masonry for a variable-height tile layout, or Carousel for a horizontally scrollable slider with arrow and dot navigation.

Next, choose Video Play In to define what happens when a visitor clicks a video thumbnail. Pop Up opens the video in a full-screen lightbox overlay, Play Inline plays the video directly inside the card, and Direct YouTube redirects visitors to the YouTube video page.

설정 Gap in pixels to control spacing between video cards (default is 15px), and choose 열 to display 1, 2, 3, or 4 columns of videos.

Paste your generated YouTube Data API key into the Access Tokens field. Then select your 피드 유형 — Channel to pull all videos from a channel, Playlist to pull from a specific playlist, or Search to display videos matching a search query. Depending on your feed type, enter your 채널 ID, Playlist ID, 또는 검색 쿼리 in the field that appears below.

당신을 선택하세요 Thumbnail Quality from Default, Medium, or High. Set the Video Order to sort your videos by Date, Title, Relevance, Rating, or Views. Set Max Results to control how many videos display on the page (default is 12).

If you ever need to refresh your feed manually, click the Click Here button beside Delete Cache to clear the cached feed data and force a fresh pull from YouTube.

Step 4: Configure Icon Settings #

Scroll down and expand the 상 section to customize the icons displayed on each video card.

에 대한 YouTube Icon — the branding icon shown on each card — choose from three options: None to hide it, Upload SVG to use a custom branded icon, or Icon Library to choose from the ElementsKit icon library.

에 대한 Play Icon — the play button overlaid on each thumbnail — you get the same three options: None, Upload SVG, or Icon Library.

Step 5: Configure Statistics #

확장 Statistics section to control the video stats displayed on each card. By default, four statistics items appear: viewCount, likeCount, favoriteCount, and commentCount.

Expand any statistics item to customize it. Set the 상 by clicking the icon field to open the icon library and choose a visual icon for the stat. Set the 유형 by selecting the data type from the dropdown — Views, Likes, Comments, or Favorites. Set the 상표 to add a custom text label displayed beside the stat.

딸깍 하는 소리 아이템 추가 to add additional statistics beyond the defaults. Use the copy icon to duplicate an existing statistics item, or the X icon to remove one.

Step 6: Configure Settings Section #

Scroll down and expand the 설정 section for display and layout controls.

비녀장 Video Title to show or hide the title on each video card. Toggle Play Button to show or hide the play button overlay.

설정 Statistics Position — choose Separate to display statistics in their own area below the thumbnail, or In YouTube Thumb to overlay the statistics directly on the video thumbnail.

비녀장 설명 to show or hide the video description below each card. Set the Thumb Position to control where the channel avatar appears — Top, Before Statistics, Before Description, Bottom, Left, or Right.

아래에 Video Description, toggle Letter Limit to enable a character limit on the description text, then set the Letter Count value to control how many characters are displayed (default is 50).

비녀장 Enable Load More to show a few videos first and reveal more on click — this works within the Max Results count you set earlier.

If you selected 회전목마 as your Layout Style, an additional 슬라이더 설정 section will appear. Here you can set Spacing (px) for the gap between cards (default 15px), 표시할 슬라이드 for how many cards are visible at once (default 3), 스크롤할 슬라이드 for how many move per scroll (default 1), and Speed (ms) for the transition speed (default 1000).

비녀장 자동 재생 to enable automatic sliding, 화살표 표시 to display navigation arrows, Show Scrollbar to show a scrollbar below the carousel, Enable Loop? for continuous looping, and Show Dots for dot navigation. Set 오른쪽 화살표 아이콘 그리고 왼쪽 화살표 아이콘 using None, Upload SVG, or Icon Library.

Step 7: Style the YouTube Feed Widget #

다음으로 전환하세요. 스타일 탭 at the top of the panel to customize the visual appearance of the widget.

싸개 #

확장 싸개 section to style the outer container of each video card. Switch between 정상 그리고 호버 tabs to apply different styles for each state.

설정 배경 유형 to solid color or gradient. Add a 박스 섀도우 with custom color, blur, and spread controls. Choose your 테두리 유형 from Solid, Double, Dotted, Dashed, or Groove. Set the 테두리 너비 for each side (Top, Right, Bottom, Left) — default is 1px. Pick the 테두리 색상 using the color picker. Set the 테두리 반경 to round the corners (default 5px). Adjust 심 for inner spacing and 여유 for outer spacing.

Video Thumb #

확장 Video Thumb section to style the video thumbnail image.

세트 Video Thumb Width (%) for the proportional width (default 100%) and Video Thumb Height (px) for a fixed height (default 220px). Set the 오버레이 색상 for the normal state and the Hover Overlay Color for when a visitor hovers over the thumbnail. Adjust the 테두리 반경 to round the thumbnail’s corners and the 여유 around it.

YouTube Thumb #

확장 YouTube Thumb section to style the channel avatar and icon.

에 대한 Channel Thumb, 설정하다 Width (px) of the avatar (default 40px), the 테두리 반경 to round it (default 50px creates a perfect circle), and the 여유 around it.

에 대한 Thumb Icon, 설정하다 Font Size (px) of the YouTube icon (default 30px), the 색상 of the icon, and the 배경 유형 as solid or gradient. Configure 테두리 유형, 테두리 반경, 심, 그리고 여유 to complete the styling.

Play Button #

확장 Play Button section to style the play button overlaid on each thumbnail.

설정 글꼴 크기 of the play icon (default 16px) and the 버튼 너비. Switch between 정상 그리고 호버 tabs to style each state. Set the 색상 for the icon or text and the 배경색 of the button. Add a 박스 섀도우 for depth. Configure 테두리 유형, 테두리 반경, 그리고 심 to finish.

콘텐츠 #

확장 콘텐츠 section to style the text content of each card.

을 위한 Channel Name, control the 타이포그래피 (font family, size, weight, style), 색상 for normal state, Color Hover for hover state, 여유 (default Top: 10px), and 심.

을 위한 제목, 설정하다 타이포그래피, 색상, Color Hover, 그리고 여유 (default Top: 0, Right: 30, Bottom: 10, Left: 30).

을 위한 설명, control the 타이포그래피 and text 색상.

Statistics #

확장 Statistics section to style the stats displayed on each card.

을 위한 Statistics Text, 설정하다 타이포그래피, 색상, Color Hover, 그리고 심 (default Top: 10px).

을 위한 Statistics Icon, control the 글꼴 크기 (default 15px), 색상, 호버 색상, 심 (default Right: 6px), 테두리 유형, 심, 그리고 여유.

Arrow & Dot #

메모: Available when Carousel layout is active

아래에 Slider Arrow, 설정하다 화살표 크기(px) for the navigation arrows, the Nav Color for the normal state, and the Nav Hover Color for when a visitor hovers over the arrows.

Once all your settings are configured, click 게시 in Elementor to make your YouTube feed live on your WordPress site.