Easy Way to Display Videos From Youtube Channel in Your Shopify Store

{%- comment -%}
###############################################################################
     Display Videos From Youtube Channel in Your Shopify Store 
     ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
###############################################################################
#    Paypal Me: https://paypal.me/elghorfimed  #
#              Buy Me A Coffee:                #
#    https://www.buymeacoffee.com/elghorfi     #
###############################################################################
    [email protected]
    Https://elghorfimed.medium.com/aac856b82b81
###############################################################################
{%- endcomment -%}
<div id="section-id-{{ section.id }}">
  <div id="youtubeApi"></div>
</div>
{% schema %}
{
  "name": "Youtube Videos",
  "settings": [
    {
      "type": "text",
      "label": "Api Key",
      "id": "apiKey",
      "info": "ApiKey we generated on Step #1"
    },
    {
      "type": "text",
      "label": "Channel ID",
      "id": "channelID",
      "info": "Your Channel ID"
    },
     {
      "type": "range",
      "label": "Max Results",
      "id": "maxResults",
      "default": 10,
      "min": 1,
      "max": 50,
      "step": 1
    },
    {
      "type": "radio",
      "label": "Layout",
      "id": "layout",
      "default": "slider",
      "options": [
        {
          "label": "Grid",
          "value": "grid"
        },
        {
          "label": "Slider",
          "value": "slider"
        }
      ]
    },
     {
      "type": "header",
      "content": "Slider Layout Settings"
    },
    {
      "type": "checkbox",
      "label": "Infinit Loop",
      "id": "infinitLoop",
      "default": true
    },
    {
      "type": "range",
      "label": "Autoplay Speed",
      "id": "autoplaySpeed",
      "default": 2,
      "min": 0,
      "max": 15,
      "step": 0.5,
      "unit": "s",
      "info": "0 means autoplay is disabled"
    },
    {
      "type": "range",
      "label": "# Items per View Port",
      "id": "itemsPerView",
      "default": 2,
      "min": 1,
      "max": 6,
      "step": 1
    },
    {
      "type": "range",
      "label": "Space between slides",
      "id": "spacingPerSlides",
      "default": 0,
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "range",
      "label": "Video Height",
      "id": "video_height",
      "default": 200,
      "min": 50,
      "max": 800,
      "step": 10,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Grid Layout Settings"
    },
    {
      "type": "range",
      "label": "Number of Videos Per Row",
      "id": "number_of_videos_per_row",
      "default": 4,
      "min": 1,
      "max": 5,
      "step": 1
    },
    {
      "type": "range",
      "label": "Number of Videos Per Row Mobile",
      "id": "number_of_videos_per_row_mobile",
      "default": 2,
      "min": 1,
      "max": 3,
      "step": 1
    },
    {
      "type": "range",
      "label": "Grid Gap",
      "id": "grid_gap",
      "default": 5,
      "min": 0,
      "max": 50,
      "step": 1
    }
    ],
    "presets": [
      {
        "category": "Youtube Videos",
        "name":"Youtube Videos"
      }
    ]
}
{% endschema %}
<style>
    #youtubeApi iframe{
      {% if section.settings.layout == "slider" %}
        width: calc(100%/{{ section.settings.itemsPerView }} - {{ section.settings.spacingPerSlides | times: section.settings.itemsPerView}}px);
      {% else %}
        width: 100%;
      {% endif %}
      height: {{ section.settings.video_height }}px;
      min-height: 50px;
      margin-right: {{ section.settings.spacingPerSlides }}px;
      border: none;
      outline: none;
    }
  {% if section.settings.layout == "grid" %}
    #youtubeApi {
      display: grid ;
      gap: {{ section.settings.grid_gap }}px;
      grid-template-columns: repeat({{ section.settings.number_of_videos_per_row }}, 1fr);
    }
    @media screen and (max-width: 520px){
      #youtubeApi {
        grid-template-columns: repeat({{ section.settings.number_of_videos_per_row_mobile }}, 1fr);
      }
    }
  {% endif %}
</style>

{% if section.settings.layout == 'slider' %}
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
{% endif %}
<script>
  let iFrame = document.querySelector('iframe')
  let youtubeApi = document.querySelector('#youtubeApi')
  let apiKey = '{{ section.settings.apiKey }}'
  let channelId = '{{ section.settings.channelID }}'
  let limit = {{ section.settings.maxResults }}
  let Url = 'https://www.googleapis.com/youtube/v3/search?key='+apiKey+'&channelId='+channelId+'&part=snippet,id&order=date&maxResults='+limit
  getProductData(Url)
  {% if section.settings.layout == "slider" %}
    setTimeout(function () {
      let flkty = new Flickity( '#youtubeApi', {
        {% if section.settings.infinitLoop %}
          wrapAround: true,
        {% endif %}
        cellAlign: "left",
        autoPlay: {% if section.settings.autoplaySpeed == 0 %}false{% else %}{{ section.settings.autoplaySpeed | times: 1000 }} {% endif %},
        pageDots: false
      });
    }, 2000);
  {% endif %}
  function getProductData(Url) {
    fetch(Url)
    .then(response => response.json())
    .then(data => {
      if(data.items)
        data.items.forEach(item =>{
          let vdo = 'http://www.youtube.com/embed/'+item.id.videoId
          let ifm = document.createElement('iframe')
          ifm.setAttribute('src', vdo)
          youtubeApi.appendChild(ifm)
        })
    })
  }
</script>

This is awesome...thank you. Anyway to just show a specific playlist?

yes you can, check this: https://developers.google.com/youtube/v3/docs/playlistItems/list