How to Remove YouTube Video Controls from Embedded Videos
Embedding videos from YouTube is one of the best ways to share content and engage your audience. However, sometimes you may want to remove the distracting player controls and create a more streamlined and focused user experience. Fortunately, there’s a simple way to hide these controls when embedding YouTube videos In this guide, we'll walk you through the process and explain why and when it makes sense to remove the controls Plus, we’ll show you how xFanatical can help optimize your website and improve your overall digital experience
Why Remove YouTube Video Controls?
YouTube provides powerful embedded video options for users to share content However, when embedding videos on your website, there may be instances where you want to remove the default YouTube controls Here are some common reasons why you might want to do this:
1. Cleaner Aesthetics: When you embed a YouTube video, the player controls (play, pause, volume, fullscreen, etc.) can sometimes distract from the surrounding content. Removing the controls can create a cleaner, more professional appearance
2 Focus on the Content: If your goal is to keep viewers focused solely on the video without giving them the option to skip parts or change settings, removing the controls can ensure they watch the entire video.
3. Branding and Customization: If you’re looking to maintain a specific look for your site, hiding the video controls allows you to customize your video player more seamlessly with your website's design
How to Remove YouTube Video Controls from Embedded Videos
Now, let’s dive into how you can remove YouTube video controls when embedding videos on your website.
Step 1: Get the Embed Code from YouTube
The first step is to get the embed code for the video you want to share. Here’s how you can do that:
1 Open the Video on YouTube: Go to the YouTube video you want to embed
2 Click on Share: Just below the video, you’ll see the “Share” button Click on it
3 Select Embed: After clicking “Share,” you’ll see several options, including “Copy Link” and “Embed.” Click on the “Embed” button to get the HTML code.
4. Copy the Embed Code: The embed code will appear in a box. Copy this code by clicking the “Copy” button.
At this point, you should have the embed code for the video, which might look something like this:
html
CopyEdit
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Step 2: Add ?controls=0 to the Embed URL
Next, you’ll want to modify the video URL in the embed code to remove the controls.
1 Find the Video URL: In the embed code, you’ll see a URL starting with https://www youtube com/embed/ This is the URL of the video
2 Add ?controls=0: Simply add ?controls=0 at the end of the video URL to disable the controls. If the URL already has parameters (such as ?rel=0), you should add &controls=0 instead of ?controls=0.
Here’s what the modified embed code would look like:
html
CopyEdit
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Step 3: Embed the Code on Your Website
Once you have updated the embed code, the next step is to add it to your website Here’s how you can do it:
1. Access the HTML Editor: Go to the page or blog post on your website where you want to embed the video. If you're using a CMS like WordPress, navigate to the HTML or Text editor.
2 Paste the Embed Code: Paste the modified embed code (with ?controls=0) into the editor
3 Publish the Page: Once the code is pasted, publish the page or post The video will now appear on your site without the controls visible.