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 make the testimonial card adjust its size based on the amount of text and keep the image at full length in Webflow?
How can Webflow center a class both vertically and horizontally on the screen, regardless of screen size or resize?
What is the issue with the text positioning within the div block in Webflow?
How can I prevent the header text from spilling off the screen in Webflow?
How can I create overlapping images in Webflow between sections of a project?
How can I add content in Webflow so that it only displays on the mobile view and not the desktop breakpoint?
How can I fix the design/layout issue on my Webflow website that occurs when viewed on Landscape mode on an iPhone?
In Webflow, if a section below a navigation bar has a height set to 100vh, how does this affect the height of the navigation bar?
How can I get my question text to wrap in the FAQ section as the screen size gets smaller in Webflow?
Is it common for text to disappear from the screen when resizing the browser window in Webflow? If so, is there a fix for this issue?
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.