标签: youtube-iframe-api

我正在使用 Youtube iframe API 向我的页面添加视频，但即使我已将“rel”参数设置为 0，它也会在视频即将结束时显示相关视频。

这是我的代码的相关部分：

function onYouTubeIframeAPIReady() {
    player = new YT.Player('homeplayer', {
        height: '1070',
        width: '1920',
        videoId: videoID,
        playerVars: {
                'controls': 0,
                'loop': 1,
                'modestbranding': 1,
                'rel': 0,
                'showinfo': 0,
                'playlist': videoID
        },
        events: {
            'onReady': onPlayerReady
        }
    });
}

也许这个问题已经被问到，但我找不到解决方案，因为 youtube api 已经更新了多次。

我将 YouTube 链接复制并粘贴到iframe标签内，播放视频时收到以下消息

“发生错误。请稍后重试”。

我将嵌入内容放在链接内。

这是我的代码：

<iframe width="450" height="200"
    src="https://www.youtube.com/embed?v=xZs6nCUQuuM">
</iframe>

我正在使用YouTube JavaScript API来控制我页面上的YouTube播放器.当我开始一个新视频时,目标是停止所有正在播放的视频.

已经经历了各种YouTube嵌入选项的挣扎,比如单个视频,播放列表等.我提出了一个问题,这将使我的生活更加轻松.

像这样初始化玩家:

// Array to store YTplayers
var YTplayers = [];

// Select all YouTube iframes
var YTembeds = $('iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"]'); 

YTEmbeds.each(function(i) {
    iframe = $(this);

    // Generate and add the unique identifier for the current iframe
    var iframe_id = "iframe-youtube-" + i;
    iframe .attr("id", iframe_id);

    // Check if src already has a "?" and add "?" or "&" accordingly
    // then add the necessary "enablejsapi=1" option and update the src. 
    var url = iframe .attr("src");
    url …

我想用Youtube视频创建一个Slick滑块，因此我可以将youtube iFrame直接嵌入到幻灯片中，这样就可以了，但是我想要实现的是当幻灯片更改时Video应该停止/暂停播放。

我正在使用Slick Slider。

这是我正在使用的HTML ：：

<div class="entry_slider_video">
     <div data-thumb="http://placehold.it/140x100">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/gLJdzky63BA" frameborder="0" allowfullscreen></iframe>
     </div>
     <div data-thumb="http://placehold.it/140x100"><iframe width="420" height="315"  src="https://www.youtube.com/embed/Tf4sa0BVJVw?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>
     </div>
<div data-thumb="http://placehold.it/140x100">
    <iframe width="420" height="315"src="https://www.youtube.com/embed/QF903RaKLvs?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen>
   </iframe>
  </div>

和JS :::

$('.entry_slider_video').slick({
              arrows: false,
              fade: true,
              autoplay: true,
              dots: true,
              customPaging : function(slider, i) {
                  var thumb = $(slider.$slides[i]).data('thumb');
                  return '<a class="enty_thumbs"><img src="'+thumb+'"></a>';
                }
 });

我知道我必须使用Youtube API（https://developers.google.com/youtube/iframe_api_reference）才能实现此目的，我尝试了SO的一些解决方案，但没有运气。任何帮助将不胜感激，谢谢。

我尝试使用youtube iframe api来显示和控制具有平滑angular2集成的视频片段.并且尊重typescript的类型概念对于webpack编译器和我来说很重要:).

快速设置我的测试:

使用@ angular/cli(版本1.0.0-beta.32.3)来设置和安装ng2-youtube-player,然后进行两项小调整:

ng new test002
cd test002
npm install ng2-youtube-player --save-dev

app.module根据ng2-youtube-player进行了扩展,但是在app.component中我有一个小的修正和一个错误:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',// app renamed to app-root
    template: `
        <youtube-player
      [videoId]="id"
      (ready)="savePlayer($event)"
      (change)="onStateChange($event)"
    ></youtube-player>
    `
})
export class AppComponent {
  player: YT.Player;// Error: Cannot find namespace 'YT'
  private id: string = 'qDuKsiwS5xw';

    savePlayer (player) {
    this.player = player;
    console.log('player instance', player)
    }
  onStateChange(event){
    console.log('player state', event.data);
  }
}

对于错误,我使用youtube.d.ts文件伪造了命名空间:

// …

一段时间以来，我一直在寻找有关此问题的答案，但无法使提供的任何解决方案发挥作用。

这是我尝试嵌入的 YouTube 代码： http: //jsfiddle.net/BFDKS/1204/

视频 iframe 添加到 index.html 和 app.js 中，我调用：

    var tag = document.createElement('script');

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

    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady() {
        player.playVideo();
        // Mute!
        player.mute();
    }

问题是我在控制台中收到 CSR 错误

这引导我到我的manifest.json 文件：

{
"name": "",
"manifest_version": 2,
"version": "0.0.6",
"icons": {
  "16": "icon-16.png",
  "48": "icon-48.png",
  "128": "icon-128.png"
},
"content_security_policy": "script-src 'self' https://www.google-analytics.com/; https://www.youtube.com/*; object-src 'self'",
"permissions": …

<script>
    var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                var player;
                function onYouTubeIframeAPIReady() {
                    player = new YT.Player('youtube-vid', { 
                    videoId: 'M7lc1UVf-VE',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                    });
                }
                function onPlayerReady(event) {
                   event.target.playVideo(); 
                    event.target.setPlaybackQuality('hd1080'); 
                }
                function onPlayerStateChange(e) {
                    if (e.data === YT.PlayerState.ENDED) {
                        player.playVideo(); 
                      }
                      
                }
</script>

请帮我设置 youtube 质量 hd1080 并在页面加载时自动播放我使用了上面的代码，但它对我不起作用

提前致谢！

作为回应，我试图为自定义youtube播放器创建一个组件，以便引入新的播放器控件栏。表单youtube iframe API，曾提到使用以下代码创建播放器实例，

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: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

但是，当我尝试在React组件生命周期方法（例如componentDidUpdate）上使用此代码时，根本找不到YT实例。

有什么解决办法吗？

我想确保当我初始化 a 时new YT.player()，我可以设置它以确保它使用来自www.youtube-nocookie.com域的嵌入。这是目前可能的吗？我还没有在文档中找到任何对它的引用。

我正在我的网站中嵌入 YouTube <iframe>。我想删除视频标题下的灰色渐变阴影，但似乎找不到如何删除。

我对此做了很多研究，但发现你不能再删除标题了。我想知道你是否还能去掉标题下的灰色阴影。我只是想让视频看起来干净并带有播放按钮，并且我会在其后面添加阴影。我需要这个，因为这符合我的网站设计。

玩检查元素我发现这.ytp-gradient-top是导致渐变阴影的类，我只是不知道如何摆脱它。

任何帮助表示赞赏！

我要删除的渐变阴影