Read this topic to learn about how to play YouTube videos in mini-programs by using the <youtube-player> component.

Prerequisites

Before you begin, you need to take the following things into consideration:

• The mini program core library (AppX) needs to be the 2.8.9 version. For more information about how to update Appx to 2.8.9, contact your Solution Architect for the documentation.

Note: To learn about what versions the AppX and the SDK that you integrate are, refer to Obtain your current versions of the core library and IAPMiniProgram SDK.

• Supported video package format for both iOS and Android: YouTube video formats.
• JSAPIs are not supported for operating the player.

User experience

The following figure shows the user experience of the <youtube-player> playback.

Sample codes

See the following sample codes of the <youtube-player> component:

<view style="width:100%">
  <youtube-player 
    id="myVideo"
    style="{{style}}"
    videoId={{videoId}}
    playerVars={{playerVars}}
  ></youtube-player>
  <button type="default" size="defaultSize" onTap="resetSrc1">resetSrc1</button>
  <button type="default" size="defaultSize" onTap="resetSrc2">resetSrc2</button>
</view>

Page({
  data: {
    videoId: 'xxx',
    style: "height:300;width:100%;left:10",
    playerVars: {
      'autoplay': 1, 
      'modestbranding': 1
    }
  },
  onLoad() {
  },
  resetSrc1() {
    this.setData({
      videoId: "xxx",
      style: "background-color:white;height:400;width:100%;margin-top:200",
    })
  },
  resetSrc2() {
    this.setData({
      videoId: "xxx",
      style: "background-color:white;height:300;width:100%;margin-top:100",
    })
  }
});

Parameters

FAQs

Why does not the autoplay parameter take effect on the iOS system?

The autoplay parameter does not take effect on the iOS system because the iOS system itself has restrictions on automatically playing videos on web pages. For more information about the policies, see New <video> policies for iOS.

Why the full-screen modes of Android and iOS are different?

The full-screen modes are implemented via YouTube APIs. For more information, see YouTube APIs.

Why the video-sharing function of Android and iOS is restricted?

YouTube Player is embedded into mini-programs via the <iframe> HTML element. To ensure the security of mini-programs, your mini-program needs to forbid the redirection of <iframe> when implementing this element, which leads to restrictions on related functions, such as video-sharing and watching videos in the YouTube Player app.