Ghost cms youtube 视频嵌入大小

Question

我在客户网站上遇到了一个错误。他们新帖子中的所有 youtube 嵌入现在都设置为 width="200" 和 height="113"，但是一些较旧的帖子将视频嵌入 width="612" by height="344"。

现在将嵌入设置为这种大小的 Ghost 代码库是否发生了变化？我试图将旧帖子视频复制到新帖子中，以防 youtube 视频出现问题。但是它仍然将其设置为较小的尺寸。

Answer 1

这是一种无需指定height 和width 即可在Ghost 中嵌入任何youtube 视频的方法。 您的嵌入视频将在任何设备上响应，并且加载时间将非常短。

通过进入code injection 将此脚本添加到您的页面

<script>
  /*
   * Light YouTube Embeds by @labnol
   * Credit: https://www.labnol.org/
   */

  function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute(
      'src',
      'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0'
    );
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute(
      'allow',
      'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
    );
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName('youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace(
        'ID',
        videoId
      );
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>

并为样式添加一点 CSS

.youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('//i.imgur.com/TxzC70f.png') no-repeat;
    cursor: pointer;
  }

现在您只需在 ghost 中嵌入 youtube 视频中添加一行

<div class="youtube-player" data-id="VIDEO_ID"></div>

不要忘记在VIDEO_ID处添加您的视频ID

Answer 2

我用这个简单的js代码：

window.on('load', function() {
    $('.kg-card.kg-embed-card > iframe').css({height: "344px"})
}

卡类属于2.16.4
如果您使用其他 Ghost 版本，请在示例帖子中查找生成的类。