We're in beta! Don't mind the bugs.
Helpful resources
Need more help?
Check out the Webflow community.
Free Webflow templates
The best free Webflow templates.
Hire a Webflow expert
Partner with a certified expert.
Rate this answer
Good
Good
Bad
Bad
Share
All posts
Layout

How can I make the embed on my Webflow site full screen?

Published on
September 22, 2023
Note
CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To make the embed on your Webflow site full screen, follow these steps:

  1. Add an embed component: In Webflow, navigate to the page where you want to add the full-screen embed. Drag and drop an Embed element onto the desired section of the page.

  2. Get the embed code: Obtain the embed code from the platform you're using, such as YouTube, Vimeo, or an external website. For example, if you're embedding a YouTube video, go to the video's page on YouTube and click the "Share" button. Then, select the "Embed" option and copy the provided code.

  3. Paste the embed code: Return to your Webflow project and double-click on the Embed component you added. In the settings panel that appears on the right-hand side, paste the embed code into the code field.

  4. Set the embed to full screen: To make the embed full screen, add CSS code to the Embed component. Select the Embed component and click on the "Settings" tab in the right-hand panel. Scroll down to the "Custom attributes" section and click the "+" button to add a new attribute. Set the attribute name as style and the value as display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100vh;.

  5. Preview and adjust: Save your changes, preview the page, and adjust the embed's position and size in the Designer as needed. You may need to adjust other elements on the page to accommodate the full-screen embed.

By following these steps, you can make the embed on your Webflow site full screen and provide visitors with an immersive viewing experience.

Additional questions:

  1. How do I add an Embed component in Webflow?
  2. Can I make an external website full screen within the Webflow platform?
  3. What other attributes can I customize for the Embed component in Webflow?
How can I achieve a navbar dropdown that opens on click on tablet but on hover on desktop in Webflow using only a single navbar?
How can I prevent white space from being added to the outermost columns when grouping and stretching images in a grid using Webflow?
How can I improve the layout of the hero section for the Insurers for Life Sciences pages on my Webflow site?
How can I reduce the margins of grid components on Webflow to match my actual design?
For Webflow, why is the wrapping wonky in the tablet and mobile-landscape views for my Column element?
How can I create a full width container in Webflow with two 50% divs, where the left div has an image that fills the div space and adjusts when the right div has text?
How can I reduce spacing in rows in Webflow when specifying a specific pixel amount doesn't change the height?
How can I center a variable number of divs with a fixed width and distance to each other, while keeping the divs in a new line left aligned? (related to Webflow)
Is there a way to automatically adjust the height of the grid boxes in Webflow when the content inside them varies in length?
What issue are you experiencing with your website's mobile view in Webflow?
Home
Categories
Tutorials
© 2023 CommunityFAQ. All rights reserved.
TermsPrivacyCookies
CommunityFAQ is not affiliated with Webflow. This is a personal project to help answer Webflow's questions and a test project to implement new strategies while working with larger a larger CMS. CommunityFAQ is reader-supported and some links may be affiliate links.