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
Custom code

How can I create a HTML Video embed that only loads on desktop and not on mobile using Webflow?

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 create an HTML video embed that only loads on desktop and not on mobile using Webflow, you can follow these steps:

  1. Add a Video Element: In the Webflow Designer, drag and drop a Video element onto your page where you want the video to be displayed.

  2. Choose the Desktop Visibility: With the Video element selected, go to the settings panel on the right-hand side. Under the "Visibility" section, you will find three icons representing mobile, tablet, and desktop views. Click on the desktop icon to set the visibility for desktop only.

  3. Add the Embed Code: Obtain the HTML video embed code from your preferred video hosting platform (e.g., YouTube, Vimeo). It should be in the format <iframe src="YOUR_VIDEO_URL"></iframe> or <video><source src="YOUR_VIDEO_URL"></video>.

  4. Paste the Embed Code: Return to the Webflow Designer and paste the embed code into the Video element. You can do this by double-clicking on the Video element or selecting it and clicking the settings (gear) icon.

  5. Adjust Sizing and Positioning: Resize and position the Video element to fit your design. You can use the handles on the video element or adjust its dimensions in the settings panel.

  6. Test on Different Devices: Preview and test your website on different devices to ensure that the video only loads on desktop and remains hidden on mobile.

By setting the visibility of the Video element to desktop-only, you ensure that the video will only be visible on desktop devices. This optimization is useful for improving page load times and mobile user experience.

Additional tip: When embedding videos, always remember to compress and optimize the video files for web to minimize file size and improve loading speed.

Additional Questions:

  1. How do I embed a YouTube video in Webflow?
  2. Can I autoplay a video in Webflow?
  3. How do I customize the video player controls in Webflow?
How can I change the brightness of a background without affecting the text in Webflow?
What are the two consistent issues the user is experiencing with the mobile version of their site that only occur after exporting the code to their hosting provider?
What could be causing the issue with the DIV block not growing in height when the browser window is made smaller in width on Webflow?
How can I pre-select a specific Car Type in a multiple options field on a form page in Webflow?
How can I create a "previous project" and "next project" link in my portfolio section using Webflow?
Have you found a way to disable the print screen function on a website using Webflow?
Is there a simpler way to change the layout and size of Lightbox thumbnails in Webflow without creating multiple wrappers if I am working on a project template? And has the feature of adding captions to Lightbox images been implemented since July 2019?
Is it possible to have Webflow go back to the last tab visited instead of redirecting to the first tab when the browser back button is clicked?
What could be causing the fixed position elements to not stay fixed on the Services and A propos pages in Webflow?
How can I change the color of links in the sidebar TOC to black while keeping them blue in the CMS Rich text?
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.