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?
In Webflow, how can I fix the issue of my website creating a horizontal scroll and paragraphs not responding to the viewport properly in mobile view?
How can I fix the mobile view on my Webflow site?
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?
What could be causing my navigation bar to be invisible on mobile devices in all versions of my website, but visible on desktop?
How can I achieve consistent spacing between all of my content in Webflow?
How can I change the width of a block holding two logo images on my "coming soon" page in Webflow to be 50% width on mobile portrait without it being left-aligned?
Why isn't my grid centered on the screen in Webflow?
What can I do if my website looks different on other laptop screens in Webflow?
How can I adjust the zoom level of the images in the bottom gallery of my Webflow Lightbox to fit within the square grid like the blog grid at the top of the page?
Can someone provide guidance on creating a unique navigation system using a dynamic layout, like the one on the Portfolio of select projects by Houses & Barns by John Libby website?
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.