JS-151-API
  • JavaScript Library
  • 02-DOM-Manipulation
    • Overview
    • DOM Explained
    • Example Setup
    • Selecting Elements
    • Events
    • Complete Example
  • 03-API Fundamentals
    • 0-Getting Started
      • Welcome
    • 1-Intro-To-APIs
      • Intro
      • Client
      • Requests
      • JSON
      • API Endpoints
      • Server
      • Response
      • Statelessness
      • REST
    • 2-Asynchronous-Programming
      • Intro
      • Callbacks
      • Promises
      • Promises Continued
      • Chaining Promises
    • 3-Fetch
      • Fetch Intro
      • Star Wars
        • Star Wars API
        • Star Wars Setup
        • Star Wars JS
      • Random Photo
        • Unsplash
        • Unsplash Setup
        • Unsplash JS
    • 4-Apps
      • 01-New York Times
        • 00-App Intro
        • 01-HTML/CSS/API Key
        • 02-Variables
        • 03-Event Listeners
        • 04-fetchResults
          • 01-fetchResults()
          • 02-preventDefault()
          • 03-fetch() method
          • 04-Dates
        • 05-displayResults
          • 01-Logging JSON
          • 02-Working with JSON
          • 03-Link Display
          • 04-Results Navigation
          • 05-Results Update
          • 06-Keywords
          • 07-Images
        • 06-Pagination
          • 01-Pagination Intro
          • 02-Pagination Functions
        • 07-Next Steps
      • 02-YouTube
        • html
        • youtube.css
        • youtube.js
      • 03-GoogleMaps
        • Setup
        • HTML and CSS files
        • API Key
        • JS Setup
        • Adding Your Location
        • Listeners
        • Custom Options
Powered by GitBook
On this page
  1. 03-API Fundamentals
  2. 4-Apps
  3. 02-YouTube

youtube.css

body {
    font-family: sans-serif;
  }

  .wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
  }

  .controls, .results {
    flex: 1;
    padding: 10px;
  }

  form p:nth-of-type(1) {
    margin-top: 0;
  }

  h1 {
    text-align: center;
  }

  h2 {
    font-size: 20px;
  }

  article p {
    font-size: 14px;
    line-height: 1.5;
  }

  article p:nth-of-type(2) {
    font-size: 14px;
    line-height: 2;
  }

  nav {
    margin-bottom: 50px;
  }

  .prev {
    float: left;
  }

  .next {
    float: right;
  }

  article {
    padding: 10px;
    margin-bottom: 20px;
    background-color: #ddd;
    border: 1px solid #ccc;
  }

  img {
    float: right;
    margin-left: 20px;
    max-width: 200px;
  }

  .clearfix {
    clear: both;
  }

  span {
    background-color: #ccc;
    padding: 5px;
    margin: 5px;
  }
PrevioushtmlNextyoutube.js

Last updated 7 years ago