の 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.
• Elementorページビルダー (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、 または Search Query 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.