YouTube embedded videos are "not playable on the server", while the application "works fine on localhost"

Question

I am trying to play some videos using YouTube's api in an angular application and I am using "youtube-player": "^5.5.0" npm package.

The application runs fine on the localhost where it can play all the videos, when deployed on to server, most of the sample videos are not working.

As the videos are playable YouTube website as well as on localhost, I am not sure what I am missing here, I don't see any warnings on dev tools either.

For example here is the sample video id: vlkNcHDFnGA, I can also see that videos are playable on iframe directly: https://jsfiddle.net/skjagini/419wcuod/

扩展BeautifulSoup HREF搜索

我可以确认视频可以嵌入并且可以联合发布，这是我发布的查询以查找结果

YouTubeService youtubeService = new YouTubeService(new BaseClientService.Initializer()
            {
                ApiKey = "key",
                ApplicationName = this.GetType().ToString()
            });

            var searchListRequest = youtubeService.Search.List("snippet");
            searchListRequest.Q = searchText; 
            searchListRequest.MaxResults = 5; // 50
            searchListRequest.Type = "video";
            searchListRequest.VideoSyndicated = SearchResource.ListRequest.VideoSyndicatedEnum.True__;
            searchListRequest.VideoEmbeddable = SearchResource.ListRequest.VideoEmbeddableEnum.True__;

在我拥有的.html文件中

<section class="app-footer footer">
    <div class="container-fluid">

        <span class="float-left">
            <div class="player-defaults" id="video-player"></div>
        </span>

我在.ts文件中

this.player = YouTubePlayer('video-player', {
    height: 60, width: 100
});

this.player.on('stateChange', (event) => {
    if (!this.stateNames[event.data]) {
        throw new Error('Unknown state (' + event.data + ').');
        // console.log()
    } else if (event.data === 0) {
        this.playNext();
    }
});

playVideoById(vidoeId: string) {
    if (vidoeId == null) {
        if (this.activeSong) {
            vidoeId = this.activeSong.videoId;
        } else {
            return;
        }
    }
    this.isPlaying = true;
    // 'loadVideoById' is queued until the player is ready to receive API calls.
    this.player.loadVideoById(vidoeId); // player.loadVideoById('M7lc1UVf-VE');
    this.playVideo();
}

playVideo() {
    this.isPlaying = true;
    // 'playVideo' is queue until the player is ready to received API calls and after 'loadVideoById' has been called.
    this.player.playVideo();
}

编辑：当我右键单击youtube播放器并选择嵌入式视频时，它似乎产生正确的html，与我的JSFiddle相同

<iframe width="1920" height="1080" src="https://www.youtube.com/embed/vlkNcHDFnGA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

如果我单击youtube徽标，它将在youtube浏览器中打开并正常播放视频。

只是不确定为什么它要在JSFiddle，localhost中播放，而不是在服务器上播放。

编辑：我确实注意到我收到了CORD（不是CORS错误），因为我的服务器是http，而youtube在后台调用的google ads服务是https。这可能是个问题吗？

Answer 1

Youtube IFrame希望主机在https域上运行。

由于localhost被认为是安全的，因此IFrame在localhost上可以正常工作，但是当托管在公共域中时，则需要通过Https提供服务。

我使用了LetsEncrypt提供的免费证书来获取域的ssl，此后一切开始正常工作。

Answer 2

  

YouTube嵌入式视频“无法在服务器上播放”

对我来说似乎很清楚。这意味着服务器不支持嵌入式视频。