点击封面后显示youtube

1tuwyuhd  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(161)

其工作原理是：
点击后，youtube应该会出现在屏幕上，但事实并非如此。
代码中需要修复/调整哪些内容才能实现？
此外，由于某种原因，我一直收到一条错误消息。
它要求我提供更多信息，但仅此而已。
代码https://jsfiddle.net/rsbwe91z/

  1. const load = (function () {
  2.    "use strict";
  4.    function _load(tag) {
  5.       return function (url) {
  6.          return new Promise(function (resolve) {
  7.             const element = document.createElement(tag);
  8.             const parent = "body";
  9.             const attr = "src";
  10.             element.onload = function () {
  11.                resolve(url);
  12.             };
  13.             element[attr] = url;
  14.             document[parent].appendChild(element);
  15.          });
  16.       };
  17.    }
  18.    return {
  19.       js: _load("script")
  20.    };
  21. }());
  23. (function manageCover() {
  24.    "use strict";
  26.    function show(el) {
  27.       el.classList.remove("hide");
  28.       document.querySelector(".curtain").classList.add("slide");
  29.    }
  31.    function hide(el) {
  32.       el.classList.add("hide");
  33.    }
  35.    function coverClickHandler(evt) {
  36.       const cover = evt.currentTarget;
  37.       const thewrap = cover.parentNode.querySelector(".container");
  38.       hide(cover);
  39.       show(thewrap);
  41.    }
  42.    const cover = document.querySelector(".jacket");
  43.    cover.addEventListener("click", coverClickHandler);
  44. }());
  46. const videoPlayer = (function makeVideoPlayer() {
  47.    "use strict";
  49.    function onPlayerReady(event) {
  50.       const player = event.target;
  51.       player.setVolume(100); // percent
  52.    }
  53.    let hasShuffled = false;
  55.    function onPlayerStateChange(event) {
  56.       const player = event.target;
  57.       const shufflePlaylist = true;
  59.       if (!hasShuffled) {
  60.          player.setShuffle(shufflePlaylist);
  61.          player.playVideoAt(0);
  62.          hasShuffled = true;
  63.       }
  64.    }
  66.    function addVideo(video) {
  68.       const playlist = "M7lc1UVf-VE";
  70.       new YT.Player(video, {
  72.          width: 640,
  73.          height: 360,
  74.          host: "https://www.youtube-nocookie.com",
  75.          playerVars: {
  76.             autoplay: 0,
  77.             controls: 1,
  78.             loop: 1,
  79.             rel: 0,
  80.             iv_load_policy: 3,
  81.             cc_load_policy: 0,
  82.             fs: 0,
  83.             disablekb: 1,
  84.             playlist
  85.          },
  86.          events: {
  87.             "onReady": onPlayerReady,
  88.             "onStateChange": onPlayerStateChange
  89.          }
  90.       });
  91.    }
  93.    function init(opts) {
  94.       load.js("https://www.youtube.com/player_api").then(function () {
  95.          YT.ready(function () {
  96.             addVideo(opts.video);
  97.          });
  98.       });
  99.    }
  100.    return {
  101.       init
  102.    };
  103. }());
  105. (function iife() {
  106.    "use strict";
  108.    function show(el) {
  109.       el.classList.remove("hide");
  110.    }
  112.    function initPlayer(wrapper) {
  113.       videoPlayer.init({
  114.          video: wrapper.querySelector(".video")
  115.       });
  116.    }
  118.    function coverClickHandler(evt) {
  119.       const wrapper = evt.currentTarget.nextElementSibling;
  120.       show(wrapper);
  121.       initPlayer(wrapper);
  122.    }
  124.    const cover = document.querySelector(".jacket");
  125.    cover.addEventListener("click", coverClickHandler);
  126. }());
  1. html,
  2. body {
  3.   height: 100%;
  4.   background: #000000;
  5.   padding: 0;
  6.   margin: 0;
  7. }
  9. .outer {
  10.   display: table;
  11.   height: 100%;
  12.   margin: 0 auto;
  13.   width: 100%;
  14. }
  16. .tcell {
  17.   display: table-cell;
  18.   vertical-align: middle;
  19.   padding: 8px 8px;
  20. }
  22. .curtain-wrapper {
  23.   min-width: 40%;
  24.   max-width: 640px;
  25.   margin: auto;
  26. }
  28. .curtain-ratio-keeper {
  29.   position: relative;
  30.   padding-top: 56.25%;
  31. }
  33. .curtain {
  34.   position: absolute;
  35.   top: 0;
  36.   left: 0;
  37.   bottom: 0;
  38.   right: 0;
  39.   width: 100%;
  40.   height: 100%;
  41.   border: 3px solid red;
  42.   box-sizing: border-box;
  43.   border-radius: 25px;
  44.   overflow: hidden;
  45.   background: transparent;
  46. }
  48. .container {}
  50. .panel-left,
  51. .panel-right {
  52.   position: absolute;
  53.   height: 100%;
  54.   width: 50%;
  55.   top: 0%;
  56.   transition: all ease 8s;
  57. }
  59. .panel-left {
  60.   left: 0%;
  61.   background-color: rgb(91, 96, 106);
  62. }
  64. .panel-right {
  65.   left: 50%;
  66.   background-color: rgb(229, 211, 211);
  67. }
  69. .curtain.slide .panel-left {
  70.   transform: translateX(-100%);
  71. }
  73. .curtain.slide .panel-right {
  74.   transform: translateX(100%);
  75. }
  77. .video-wrapper {
  78.   min-width: 40%;
  79.   max-width: 640px;
  80.   margin: auto;
  81. }
  83. .video-ratio-keeper {
  84.   position: relative;
  85.   padding-top: 56.25%;
  86. }
  88. .video-frame {
  89.   position: absolute;
  90.   top: 0;
  91.   left: 0;
  92.   width: 100%;
  93.   height: 100%;
  94. }
  96. .jacket {
  97.   position: absolute;
  98.   top: 0;
  99.   left: 0;
  100.   bottom: 0;
  101.   right: 0;
  102.   height: 100%;
  103.   width: 100%;
  104.   margin: auto;
  105.   cursor: pointer;
  106.   border-radius: 25px;
  107. }
  109. .play {
  110.   position: absolute;
  111.   top: 0;
  112.   left: 0;
  113.   bottom: 0;
  114.   right: 0;
  115.   margin: auto;
  116.   min-width: 70px;
  117.   min-height: 70px;
  118.   max-width: 30%;
  119.   max-height: 30%;
  120.   fill: red;
  121.   filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  122.   cursor: pointer;
  123. }
  125. .wrap {
  126.   position: absolute;
  127.   left: 0;
  128.   top: 0;
  129.   right: 0;
  130.   bottom: 0;
  131.   margin: 0;
  132.   width: 100%;
  133.   height: 100%;
  134.   overflow: hidden;
  135.   border-radius: 25px;
  136. }
  138. .wrap,
  139. .jacket {
  140.   position: absolute;
  141.   top: -3px;
  142.   left: -3px;
  143.   width: calc(100% + 6px);
  144.   height: calc(100% + 6px);
  145. }
  147. .wrap iframe {
  148.   position: absolute;
  149.   top: -3px;
  150.   left: -3px;
  151.   width: calc(100% + 6px);
  152.   height: calc(100% + 6px);
  153. }
  155. .hide {
  156.   display: none;
  157. }
  1. <div class="outer">
  2.    <div class="tcell">
  3.       <div class="curtain-wrapper">
  4.          <div class="curtain-ratio-keeper">
  5.             <div class="curtain">
  6.                <div class="container hide">
  7.                   <div class="video-wrapper">
  8.                      <div class="video-ratio-keeper">
  9.                      </div>
  10.                   </div>
  11.                </div>
  12.                <div class="panel-left"></div>
  13.                <div class="wrap hide">
  14.                   <div class="video video-frame"></div>
  15.                </div>
  16.                <div class="panel-right"></div>
  17.             </div>
  18.             <div class="jacket" title="Play">
  19.                <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
  20.                   <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
  21.                      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
  22.                </svg>
  23.             </div>
  24.          </div>
  25.       </div>
  26.    </div>
  27. </div>
JavaScriptHtmlcss

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com