--- title: Video Player description: "The Video Player Block shows a YouTube, Vimeo, or self-hosted video. The video can play on the page, sit behind an image with a play icon, or open in a popup over the page. Use it for product demos, course…" url: "https://shapekode.com/product/shapeblock/docs/video-player/" updated: "2026-11-04" category: Media Block --- # Video Player The Video Player Block shows a YouTube, Vimeo, or self-hosted video. The video can play on the page, sit behind an image with a play icon, or open in a popup over the page. Use it for product demos, course lessons, testimonials, and hero sections with a "Watch the video" button. [How to Add a YouTube Video Popup in WordPress Gutenberg | ShapeBlock Pro Video Player](https://www.youtube.com/embed/jMTSDL46i54?feature=oembed) ## How to Add a Video Player Block Follow these steps to add and configure the Video Player Block in the Gutenberg editor. ### Step 1: Add the Video Player Block 1. Open a page or post in the WordPress Gutenberg editor. 2. Click the **+** button to open the block inserter. 3. Search for **Video Player** under ShapeBlock. 4. Insert the Video Player Block into your page. 5. Select the block to access its settings in the right-hand sidebar. 6. Choose the video type and enter the video URL, or choose a video file. ![Video Player block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-video-player-1.webp) ### Step 2: Configure the Video Player Block Select the Video Player Block and open its settings in the right-hand sidebar. The available tabs are: - **Settings:** Choose the video, how it is shown, and the playback options. - **Style:** Customize the overlay, play icon, and popup. - **Advanced:** Configure the block padding, margin, and background. Click **Preview Video** in the block toolbar to watch the video in the editor. With an image overlay, click the image twice to type a title or text on it, or add any block with `/`. Drag the blue handle of the play icon or of the text to move it. ![Video Player block selected in the editor with its settings sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-video-player-2.webp) ## Settings Tab The Settings tab contains the **Video Settings**, **Video Options**, and **Video Overlay** panels. ### 1. Video Settings - **Display Type:** Choose **Normal Only** to show the video on the page, or **Popup Only** to show an image with a play icon that opens the video in a popup. - **Video Type:** Choose **YouTube**, **Vimeo**, or **Self Hosted**. - **Video URL:** Paste the YouTube or Vimeo link. - **Self Hosted Video:** Choose an MP4 or WebM file from the Media Library or your computer. - **Aspect Ratio:** Choose 16:9, 21:9, 4:3, 3:2, 1:1, 9:16, or Custom height. With Custom height, set the **Video Height (px)**. - **Poster Image:** Choose the image shown before the video plays. For YouTube, the video thumbnail is used when empty. - **Video Max Width:** Limit the video width, for example 800px or 80%. Responsive settings are available. - **Video Border Radius:** Round the video corners. ### 2. Video Options The options shown depend on the video type. - **Autoplay:** Play the video by itself. Browsers only allow this without sound. Not available with Popup Only. - **Mute:** Start the video without sound. - **Loop:** Play the video again when it ends. - **Player Controls:** Show the play, pause, and volume buttons on the video. - **Full Screen Button:** Let visitors watch on the whole screen. YouTube and self-hosted videos. - **Captions:** YouTube only. Show subtitles from the start, when the video has them. - **Download Button:** Self-hosted only. Let visitors save the video file. - **Picture-in-Picture Button:** Self-hosted only. Let the video keep playing in a small window while visitors scroll. - **Controls Color:** Vimeo only. Set the color of the player controls. - **Suggested Videos:** YouTube only. Show videos **From the same channel** or **Any video** when the video ends. - **Intro Title, Intro Portrait, Intro Byline:** Vimeo only. Show or hide the video title, the author picture, and the author name. - **Start Time (seconds) and End Time (seconds):** Play only part of the video. End Time is not available for Vimeo. ### 3. Video Overlay - **Image Overlay:** Show an image with a play icon over the video until it is clicked. When off, the player itself is shown. - **Play Icon:** Show the play icon. When off, a click anywhere on the image plays the video. - **Active Ripple:** Show waves around the play icon. - **Lightbox:** Open the video in a popup over the page instead of playing it in place of the image. - **Play Icon Position and Text Position:** Set the place of the play icon and the text with **Left (%)** and **Top (%)**. You can set a different place on tablet and mobile. ![Video Player block, Settings tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-video-player-3.webp) ## Style Tab The Style tab contains the **Video Overlay**, **Play Icon**, and **Popup Style** panels. ### 1. Video Overlay - **Overlay Color:** Set a color or gradient over the image, so the play icon and text stand out. - **Text Color:** Set the color of the text on the image. ### 2. Play Icon - **Play Icon Style:** Click a look for the play button: Solid, Glass, Outline, Rounded, Square, Dark, Gradient, or Icon Only. - **Play Icon (from the library):** Choose a different play icon. - **Custom Play Icon (your image or SVG):** Use your own image instead of the icon above. - **Button Size (px):** Set the play button size. Responsive settings are available. - **Icon Color:** Set the play icon color. - **Button Background and Button Background on Hover:** Set the play button background, and its background when pointed at. ### 3. Popup Style This panel appears when the video opens in a popup. - **Popup Max Width (px):** Set the largest width of the popup video. - **Overlay Background:** Set the color behind the popup. - **Popup Border Radius:** Round the popup corners. - **Close Button Color and Close Button Background:** Set the colors of the close button. ![Video Player block, Style tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-video-player-4.webp) ## Advanced Tab The Advanced tab provides additional spacing and background controls for the Video Player Block. These settings apply to the entire block. ### 1. Spacing - **Padding:** Set the inner spacing around the entire Video Player Block. Configure the top, right, bottom, and left values separately. - **Margin:** Set the outer spacing around the entire Video Player Block. Configure the top, right, bottom, and left values separately. Both controls support responsive settings for desktop, tablet, and mobile devices. ### 2. Background - **Background:** Customize the background of the entire Video Player Block using a background color or gradient. **Note:** The background applies to the whole block area. **Live demo:** see the Video Player Block in action on the [Video Player demo page](https://shapekode.com/product/shapeblock/video-player/).