How do I enable fullscreen mode for a YouTube video embed?

To enable fullscreen mode for an embedded YouTube video, you need to include specific attributes in the <iframe> tag of your embed code. Here’s how to do it effectively:

Steps to Enable Fullscreen Mode

  1. Use the allowfullscreen Attribute: This attribute must be added directly to the <iframe> tag to allow the video to enter fullscreen mode.

  2. Add the allow Attribute: Additionally, including fullscreen in the allow attribute is recommended for broader compatibility across different browsers.

Example Embed Code

Here’s a sample code snippet that demonstrates how to set this up:

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" 
        allowfullscreen></iframe>

Important Notes

  • If you encounter issues with fullscreen not working, double-check that there are no conflicting parameters in the URL, such as &fs=0, which disables fullscreen functionality

  • When fullscreen feature is enable, you can see a fullscreen control in the Youtube embed player on your website

  • Use Beyondspace Youtube Embed code generator to quickly enable/disable fullscreen feature of Youtube embed code without edit the code directly.

    • Place the Youtube video URL to the Video URL input

    • In Player Options, toggle Disable Fullscreen to disable/enable fullscreen feature

    • Click Generator Code to create the embed code

Beyondspace

As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement.

https://beyondspace.studio
Previous
Previous

How do I make a YouTube video loop endlessly when embedded?

Next
Next

Can Lightbox Studio mix videos with images in Squarespace 7.1 Masonry gallery?