Question

因此，我整夜都在尝试修复iframe API，终于在StackOverflow的帮助下使其正常工作。我现在遇到的唯一问题是，当我将其实现到Wordpress自定义HTML块中时，该视频将不会出现在网页上。我花了很长时间才弄清楚，现在仍然无法正常工作。我不知道该怎么办。

这是具有（amateur）黑色边框修复的API代码的代码库： https://codepen.io/MR99LP/pen/ajPyJZ

<html>
  <head>
    <style>
      div.background_youtube {
        position: fixed;
        z-index: -99999;
        -webkit-user-select: none;
        user-select: none;
        width: 100%;
        height: 100%;
        -ms-transform: scale(1.15);
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
    }
    </style>
  </head>
  <body>
      <div class="background_youtube">

  <div id="player"></div>

  <script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;

    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: '4o-I4gejA-4',
        playerVars: {
          playlist: ['4o-I4gejA-4', '...'],
          controls: 0,
          autoplay: 1,
          mute: 1,
          loop: 1,
          showinfo: 0,
          rel: 0,
        },
        events: {
          'onReady': onPlayerReady,
        }
      });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      event.target.playVideo();

      var interval_is_stopped = false;
      setInterval(function() {
        var current_time = event.target.getCurrentTime();

        if (current_time > 14.9 && !interval_is_stopped) {
          interval_is_stopped = true;
          jQuery('#player').fadeTo(400, 1, function() {
            player.seekTo(0);
            jQuery(this).fadeTo(400, 1, function() {
              interval_is_stopped = false;
            });
          });
        }
      }, 10);

    }

  </script>
</div>
  </body>
  </html>

编辑：是否可以在不缩放iframe的情况下摆脱边界？

编辑2：在查找其他变换属性后，我得出了完美的平衡。 transform: scaleX(1.4)似乎是我的把戏！我现在可以使用不带内部样式表的iframe API

YouTube嵌入API黑色边框修复程序使视频不会出现在wordpress中

0 个答案: