Ghost cms youtube 视频嵌入大小 通过进入 width并为样式添加一点 CSS

如何解决Ghost cms youtube 视频嵌入大小 通过进入 width并为样式添加一点 CSS

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

Ghost 代码库中的某些更改现在将嵌入设置为这种大小吗？我试图将旧帖子视频复制到新帖子中，以防万一youtube 视频出现问题。但是它仍然将其设置为较小的尺寸。

解决方法

这是一种无需指定 android { compileSdkVersion 27 defaultConfig { applicationId "org.org" minSdkVersion 21 targetSdkVersion 27 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'),'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs',include: ['*.jar']) implementation 'com.android.support:appcompat-v7:27.+' implementation 'com.android.support:support-v4:27.+' implementation 'com.android.support:design:27.+' implementation 'com.android.support.constraint:constraint-layout:2.0.4' testImplementation 'junit:junit:4.13.2' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'com.google.android.gms:play-services-maps:17.0.0' implementation 'com.google.maps.android:android-maps-utils:0.5+' implementation 'com.google.android.gms:play-services-nearby:17.0.0' implementation 'com.google.code.gson:gson:2.8.5' implementation 'com.google.android.gms:play-services-nearby:17.0.0' implementation 'org.altbeacon:android-beacon-library:2+' implementation 'com.neovisionaries:nv-bluetooth:1.7' } 和 Ghost 即可在 height 中嵌入任何 YouTube 视频的方法。 您的嵌入式视频将在任何设备上响应，加载时间将非常短。

通过进入 width

将此脚本添加到您的页面

code injection

并为样式添加一点 CSS

<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>

现在您只需要将一行嵌入到 ghost 中的 youtube 视频

.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;
  }

不要忘记在 <div class="youtube-player" data-id="VIDEO_ID"></div>

的位置添加您的视频 ID ,

我使用这个简单的js代码：

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

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