display youtube channel on wordpress

Unverified

Name

About

הצגת ערוץ יוטיוב שלם בוורדפרס

Language

Javascript

Rating

Voted: 0 by 0 user(s)

Codevault

shaike

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.4

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

04/07/2024

Important Note

This snippet has the following status:

Unverified

This snippet has not been verified, use with caution and at your own risk. See details provided by author in sidebar and click below to find out more.

Learn More

display youtube channel on wordpress

 
                     1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4<meta charset="UTF-8">
 5<title>YouTube Channel Videos</title>
 6<style>
 7    .video {
 8        margin-bottom: 20px;
 9    }
10    .video img {
11        width: 300px;
12        height: auto;
13    }
14</style>
15</head>
16<body>
17<div id="video-container"></div>
18 
19<script>
20function fetchYouTubeVideos() {
21    const apiKey = '000000222222555555'; // החלף את YOUR_API_KEY במפתח ה-API שלך
22    const channelId = 'UUUUYYYYMMMNNN'; // החלף את YOUR_CHANNEL_ID ב-ID של הערוץ
23    const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&maxResults=20`;
24 
25    fetch(url)
26    .then(response => response.json())
27    .then(data => {
28        const container = document.getElementById('video-container');
29        data.items.forEach(item => {
30            if (item.id.videoId) {
31                const videoId = item.id.videoId;
32                const title = item.snippet.title;
33                const imageUrl = item.snippet.thumbnails.high.url;
34                const videoElement = `
35                    <div class="video">
36                        <h3>${title}</h3>
37                        <a href="https://www.youtube.com/watch?v=${videoId}" target="_blank">
38                            <img src="${imageUrl}" alt="${title}">
39                        </a>
40                    </div>
41                `;
42                container.innerHTML += videoElement;
43            }
44        });
45    })
46    .catch(error => console.error('Error fetching data: ', error));
47}
48 
49fetchYouTubeVideos();
50</script>
51</body>
52</html>

Related Snippets

Please see some snippets below related to this snippet..

JavaScript

Unverified

Text fields makes autocomplete off

Added: 1 year ago

Last Updated: 1 year ago

Make text field autocomplete off using the Fluent forms plugin

View

JavaScript

Unverified

Change Browser Tab Title When Not in Focus

Added: 1 year ago

Last Updated: 1 year ago

Encourage visitors to return to your site by changing the title in the browser tab when it is not in focus. You can see it in action here... https://carpetzone.co.uk/

View

JavaScript

Unverified

Browser Tab Message

Added: 1 year ago

Last Updated: 1 year ago

This snippet replaces the text in the Browser Tab with one of your own whenever the browser tab is not in focus.

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

WordPress Admin

AI Verified

פונקציה שמוסיפה את הפריפיקס tel: לערך השדה ב ACF

Added: 2 months ago

Last Updated: 2 months ago

יצירת קישור לטלפון בתוסף ACF בוורדפרס ולהוסיף באופן אוטומטי את הפריפיקס "tel:" למספר הטלפון

View

Elementor

Unverified

show youtube channel on wordpress

Added: 4 months ago

Last Updated: 4 months ago

View

Elementor

Unverified

הופך את מד התקדמות של אלמנטור לאנכי ולכל גובה המסך

Added: 4 months ago

Last Updated: 4 months ago

View