Skip to main content

PHP: 2. Fetch Youtube Videos on a Static Website







Got Stuck, Want to fetch the Youtube Videos on your static website and have no clue how to do that, No worries you are at the right place just follow the steps, and you are done, enjoy the hassle-free automated videos from your youtube channel to your up and running website. No more embedded iframe manual youtube videos.

 Step 1: Convert the HTML file to PHP

Step2: Paste the following code on top of the page

<?php
ini_set('display_errors', 0);
//Get videos from channel by YouTube Data API
$API_key    = 'AIzaSyAMMD1zd1SCDSRG-FVjNxHNyMx1i3A1J6g';
$channelID  = 'Your Channel ID';
$maxResults = 10;
$videoList = json_decode(file_get_contents('https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId='.$channelID.'&maxResults='.$maxResults.'&key='.$API_key.''));
?>

Step 3: Loop Through Videos and their thumbnails by following code

 <?php
    foreach($videoList->items as $item){
        //Embed video
        if(isset($item->id->videoId)){
            echo '<div class="item">
                    <!-- <iframe src="https://www.youtube.com/embed/'.$item->id->videoId.'" frameborder="0" allowfullscreen></iframe> -->
                    <a href="https://www.youtube.com/embed/'.$item->id->videoId.'" target="_blank">
                    <img src="'.$item->snippet->thumbnails->high->url.'">
                    </a>
                </div>';
        }
    }
?>

Now Cheers !
Labels:

Comments

Post a Comment

Popular posts from this blog

React: Remember me functionality with React

Want to know how can you easily integrate Remember me on your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the react-cookie in your project    npm install react-cookie Step2: Add the following code in index.js import { CookiesProvider } from "react-cookie"; ReactDOM.render(      <CookiesProvider>           <App />      </CookiesProvider>,      document.getElementById('root') ); Step3: Add the following code in your component    import React, { useState } from 'react'; import { useCookies } from 'react-cookie'; const App = () => { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const [cookies, setCookie] = useCookies(['user']); const handle = () => {      setCooki...
Post a Comment
Read more

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
3 comments
Read more

WP: 8. Dynamically show post taxonomies and their data in tab format [Solved]

    Today I ran into a problem, I need to dynamically show post taxonomies and their data in tab format and found this solution. And nonetheless, It's better to fix the thing with some bunch of code rather than uploading one more bulky plugin on your website that will end up making your site heavy. Just follow the steps below and avoid heading up into any malicious or bulky plugin for this particular problem from now on forever. Step 1: Get the taxonomies terms first <?php     $terms = get_terms( array(       'taxonomy' => 'off_plan_categories',       'hide_empty' => true,     ) );     // echo '<pre>';     // print_r($terms);     // die; ?> Step 2:  Execute loop first for tab navigation <nav id="offPlanPropertyTabs" class="offplan-property-type-tabs nav nav-tabs"> <?php foreach($terms as $key => $term): ?>   <button class="nav-item nav-link <?php...
1 comment
Read more