None of the YouTube javascript is working in an html page, How Come?

JavaScript
22

Can you take it out of the zip file put it inside jsfiddle and I’ll put that into an html page?

This would be helpful.

I don’t like downloading things like that off the internet.

23

Is there something wrong/incorrect in how I set this html page up?

Compared to how you have it set up in your zip file?

Can you make corrections to this.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 990px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  box-sizing: border-box;
  background: #000000;
}

.container-top {
  position: relative;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

.video-contain {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
  margin-left: 25px;
  width: 277px;
  background: red;
  border-radius: 25px;
}

.jacket {
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: url("https://i.imgur.com/fzdYu8g.jpg") no-repeat 0 0;
  background-size: 100% 200%;
}

.jacket-middle {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

.jacket-right {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

.jacket .circle {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  border: 1px solid #0059dd;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease 0s;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}

.jacket .play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 38px;
  height: 22px;
  fill: #0059dd;
}

..jacket .circle:hover {
  border: 1px solid red;
  transform: scale(1.1);
}

.jacket .circle:hover .play {
  fill: red;
}

.wrap {
  position: relative;
  width: 277px;
  height: 207px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
}

.wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 277px;
  height: 207px;
  cursor: pointer;
}

.container-left {
  float: left;
  width: 606px;
  margin: 0;
}

.container-left .jacketc {
  position: relative;
  height: 344px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/gI9vM6E.jpg") no-repeat 0 0;
  background-size: cover;
}

.container-left .jacketc .play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  fill: #fa33fc;
}

.container-left .jacketc .lines::before,
.container-left .jacketc .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketc .lines::after {
  left: 399px;
}

.container-left .wrapg {
  position: relative;
  height: 344px;
  margin: 45px 0 0 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .wrapg iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 338px;
  cursor: pointer;
}

.container-left .wrapg .lines::before,
.container-left .wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wrapg .lines::after {
  left: 399px;
}

.container-left .jacketd {
  position: relative;
  height: 606px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/baApP9x.png") no-repeat 0 0;
  background-size: 100% 200%;
}

.container-left .jacketd .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.container-left .jacketd .coversvg path {
  fill: none;
  stroke: #08f9ff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.container-left .jacketd .lines::before,
.container-left .jacketd .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .jacketd .lines::after {
  left: 399px;
}

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
}

.container-left .wraph .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-left .wraph .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.container-left .wraph .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.container-left .wraph .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.container-left .wraph .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.container-left .wraph .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
}

.container-left .wraph .nav li svg:hover path {
  fill: #0059dd;
}

.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wraph .linesa::after {
  left: 399px;
}

.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0059dd;
}

.container-left .wraph .linesb::after {
  top: 399px;
}

.container-left .wraph .nav li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  cursor: pointer;
}

.container-left .wraph .nav li .alpha,
.playinga {
  margin: 0;
}

.container-left .wraph .nav li .beta,
.playingb {
  margin: 0 201px 0;
}

.container-left .wraph .nav li .gamma,
.playingc {
  margin: 0 402px 0;
}

.container-left .wraph .nav li .delta,
.playingd {
  margin: 201px 0 0;
}

.container-left .wraph .nav li .epsilon,
.playinge {
  margin: 201px 201px 0;
}

.container-left .wraph .nav li .zeta,
.playingf {
  margin: 201px 402px 0;
}

.container-left .wraph .nav li .eta,
.playingg {
  margin: 402px 0 0;
}

.container-left .wraph .nav li .theta,
.playingh {
  margin: 402px 201px 0;
}

.container-left .wraph .nav li .iota,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}
</style>
</head>

Html


<body>

<div class="outer">
  <div class="tcell">
    <audio></audio>
    <div class="container ">
      <div class="container-top">
        <div class="video-contain">
          <div class="jacket jacket-left">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="jMAShwisnQI"></div>
          </div>
        </div>
        <div class="video-contain">
          <div class="jacket jacket-middle">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
        <div class="video-contain">
          <div class="jacket jacket-right">
            <div class="circle">
              <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="wrap hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
      </div>
      <div class="container-left">
        <div class="jacketc">
          <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
            <title>Play</title>
            <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
            <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
          </svg>
          <div class="lines"></div>
        </div>
        <div class="wrapg hide">
          <div class="video" data-id="olhhsjFBpA4"></div>
          <div class="lines"></div>
        </div>
        <div class="jacketd" title="OPEN">
          <svg class="coversvg" width="198" height="198" viewBox="0 0 47.96 51.66">
            <title>Open</title>
            <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
          </svg>
          <div class="lines"></div>
        </div>
        <div class="hide wraph">
          <ul class="nav">
            <li>
              <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playinga" data-id="ZPz3wzPlruA"></div>
              </div>
            </li>
            <li>
              <svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingb" data-id="VFMtNOxpV3o"></div>
              </div>
            </li>
            <li>
              <svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
              </div>
            </li>
            <li>
              <svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingd" data-id="-Xgi_way56U"></div>
              </div>
            </li>
            <li>
              <svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playinge" data-id="EK3h0IADYrQ"></div>
              </div>
            </li>
            <li>
              <svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingf" data-id="YOw9J4K02H4"></div>
              </div>
            </li>
            <li>
              <svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingg" data-id="ID856YDIb6A"></div>
              </div>
            </li>
            <li>
              <svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingh" data-id="VRtMZDJdIIU"></div>
              </div>
            </li>
            <li>
              <svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </svg>
              <div class="hide">
                <div class="video playingi" data-id="qYEooPeyz5M"></div>
              </div>
            </li>
          </ul>
          <div class="linesa"></div>
          <div class="linesb"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Javascript

<script>
const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
        return function (url) {
            return new Promise(function (resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function () {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());


(function manageCover() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const thewrap = cover.parentNode.querySelector(".wraph");
        hide(cover);
        show(thewrap);
    }
    const cover = document.querySelector(".jacketd ");
    cover.addEventListener("click", coverClickHandler);
}());


const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(100); // percent
    }

    let hasShuffled = false;

    function onPlayerStateChange(event) {
        const player = event.target;
        if (!hasShuffled) {
            player.setShuffle(true);
            player.playVideoAt(0);
            hasShuffled = true;
        }
        if (event.data === YT.PlayerState.PLAYING) {
            for (let i = 0; i < players.length; i++) {
                if (players[i] !== event.target) players[i].pauseVideo();
            }
        }

        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

function loadPlayer(opts) {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }


    function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");
        opts.width = opts.width || 198;
        opts.height = opts.height || 198;
        opts.autoplay = 1;
        opts.controls = 1;
        opts.rel = 0;
        opts.iv_load_policy = 3;
        opts.fs = 0;
        opts.disablekb = 1;

        function paramInOpts(settings, param) {
            if (opts[param] !== undefined) {
                settings[param] = opts[param];
            }
            return settings;
        }
        const settingsParams = ["width", "height", "videoid", "host"];
        const settings = settingsParams.reduce(paramInOpts, {});
        const playerVarsParams = ["autoplay", "cc_load_policy",
            "controls", "disablekb", "end", "fs", "iv_load_policy",
            "list", "listType", "loop", "playlist", "rel", "start"
        ];
        settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
        videoPlayer.init(video, settings);
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
        evt.currentTarget.classList.add("hide");
    }
    const cover = document.querySelector(opts.target);
    cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

loadPlayer({
    target: ".jacket-left",
    width: 424,
    height: 238
});

loadPlayer({
    target: ".jacket-middle",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacket-right",
    width: 424,
    height: 238
});
loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    loop: true,
    playlist
});
loadPlayer({
    target: ".alpha",
    start: 0,
    end: 280,
    loop: true
});
loadPlayer({
    target: ".beta",
    start: 0,
    end: 240,
    loop: true
});
loadPlayer({
    target: ".gamma",
    start: 0,
    end: 265,
    loop: true
});
loadPlayer({
    target: ".delta",
    start: 4,
    end: 254,
    loop: true
});
loadPlayer({
    target: ".epsilon",
    start: 0,
    end: 242,
    loop: true
});
loadPlayer({
    target: ".zeta",
    start: 0,
    end: 285,
    loop: true
});
loadPlayer({
    target: ".eta",
    start: 23,
    end: 312,
    loop: true
});
loadPlayer({
    target: ".theta",
    start: 2
});
loadPlayer({
    target: ".iota"
});
</script>
</body>
</html>
24

A quick search seems to suggest that you can’t run the YouTube API using the “file” protocol. That would make sense, as you say the same code works online, but not in your local file.

https://stackoverflow.com/questions/39810233/how-to-use-youtube-iframe-player-in-localhost-html-file

1 Like
25

Thank you for finding this for me. Now I know why it doesn’t work, and that there isn’t anything to worry about.

1 Like
26

opens a standalone html web page.

Read my post again and let me know if there is anything you do not understand.

Why is it necessary to view and copy the contents of the web page - that consists of the source obtained from your jsFiddle post - and post the contents back again to your jsFiddle post?

Why don’t you like “downloading things like that off the internet”?

Did you actually:

  1. open the link
  2. validate the HTML source
  3. check the CSS source
  4. check the page loading speed using Google, Pingdom, Gtmetrix, etc.
  5. check if the page is Google mobile friendly
  6. try other web page tests

These are all free utilities which make creating web pages a lot easier and none of which are available when using jsFiddle.

As @James_Hibbard mentioned jsFiddle is only good for certain tasks. Please try to understand what jsFiddle was designed to do. JsFiddle should not be the only tool in your toolbox.

There are many other free and useful web page tools available none of which it seems you are using?

27

I was just told you can’t run the YouTube API using the “file” protocol.

28

To be clear, I had no prior knowledge of that; I just stopped to think about the issues.

You said your code runs fine everywhere else - codepen, jsfiddle, github - but not in a local file. (It was not apparent from your first post that you were referring to a local file loaded in this manner, which wasted time. Please try to be clearer in future.) Anyway, that would rather suggest that the problem was a difference between the online and offline environment, and I simply searched for information on that basis.

You need to learn to step back and think clearly and logically about the situation.

6 Likes
30

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.