Plugin to modify IG videos for full-width video header

Ask the Community General Questions
1

We’ve got many great videos, shot on iphone, in portrait (4:5 and 9:16) used for instagram; we’d like a header plugin for squarespace that modifies the squarespace header (with css and js) such that the portrait video is transformed to a full-width (full header width that is) as to make a ‘video header plugin’. This seems relevant because most video today is shot on mobile devises in portrait mode.

Thanks for your attention!

PS. chatGPT outputs the following that might make for quick work of a plugin!

iPhone Portrait Video in Squarespace Header

To get an iPhone portrait video to play full-width in a Squarespace header, follow these steps:

  1. Upload your video: Embed your portrait-oriented video (e.g., 9:16 aspect ratio) from Vimeo or YouTube to Squarespace using the built-in video block. Make sure to upload the video in its original format, without resizing or cropping.
  2. Use a custom CSS hack: Add the following code to your Squarespace site’s Custom CSS (Website > Pages > Website Tools > Custom CSS):
.video-block.video-player {
  padding-bottom: 120%;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

This code targets the video block and sets its width to 100% of the parent container, height to 100vh (viewport height), and uses object-fit: cover to maintain the aspect ratio while filling the container.

  1. Apply the hack to the header section: To apply this hack specifically to the header section, you’ll need to target the .header container. You can do this by adding a class to the header section and then targeting that class in your custom CSS. For example:
.header-video {
  @extend .video-block.video-player;
}

/* Add the class to your header section */
<section class="header header-video">
  <!-- Your video block here -->
</section>
  1. Test and adjust: Preview your site on an iPhone to ensure the video plays full-width in the header section. If necessary, adjust the padding-bottom value in the custom CSS to fine-tune the video’s aspect ratio and cropping.

Note: This hack assumes you’re using Squarespace 7.1 or later. For earlier versions, you may need to use a different approach.

Additionally, keep in mind that:

  • Squarespace’s video block has limitations, such as not supporting autoplay on mobile devices. You may need to use a workaround, like adding a play button or using a third-party plugin.
  • Vimeo and YouTube have their own settings and limitations for video playback, including fullscreen mode. You may need to adjust these settings or use a different video hosting platform to achieve the desired behavior.

If you’re not comfortable with custom CSS or need further assistance, consider hiring a Squarespace developer or expert for custom code support.

1 Like
2

Hey there, @Nathan_Maggard :wave:

Thanks for adding your request to the Wishlist!

It would be helpful if you could provide more details by answering these questions:

  • Do you want to show video preview in the header or the video should be automatically playing without sound?

  • If video previews, would you like to display multiple videos or just one?

  • What should happen when clicking on this video header?

3

Here’s an example of the header video feature:

Auto-play: ideally, the widget would provide settings for auto-play vs click-to-play (note: mobile OS’s will require separate handling as the mobile OS’s typically disallow auto-play and will either auto-add a play button or one will have to be attributed in the widget’s code.)

Sound: sound-on by default: it is generally frowned upon for UX reasons to auto-play audio in the browser (on both desktop and mobile), so I’d forgo creating a setting for this and presume -at least initially- that sound-off is desirable for these header graphics. The video is meant to create visual value, as a background element rather than auditory value as a ‘multimedia’ element.

Video previews**: just one video.** (ie. paste a youtube / vimeo URL into a field, load and auto play (and loop) the video in the header.

On click: Nothing happens; this element is effectively z-indexed so as not to be clickable (except in the case of mobile, where a play button will be attributed).

To clarify, most website builders (squarespace in my current client’s case) provide ‘video looping header backgrounds’, but to “widgetize” it is extra helpful (and, importantly, worth paying for by Elfsight users) for one specific reason: most of these website builders require viewport hacking (injecting some CSS and JS found by googling) in order to —and this is the KEY FEATURE— modify (re-render) a portrait-oriented (shot on iphone / abdroid) video and to stretch and auto-scale it to ‘full width, full height’ of a header (or other) page element. << that is the real problem this widget would aim at solving.

Bonus point feature: introduce a few ‘blur’ and ‘pattern’ overlays selectable in the widget’s settings.

Some settings available in squarespace that could be easily aped: Enhancing Video Uploads 🎥 | Loom

1 Like
4

@Nathan_Maggard Our Slider app looks and works pretty similar and I guess it might be the thing for you.

Here you can add links to YouTube/Vimeo videos and show them as background, Also, you can add more elements like buttons, badges, etc:

image
image1918×837 106 KB

Please test it out and let me know if it worked for you :slightly_smiling_face: