Toggle full screen mode, with our video call API

We love to hear from our users. We always have, and always will. A perfect example is Full Screen mode, which we just shipped for our API customers. The video below shows the end user experience.

As you can see, Full Screen mode allows users to maximize the video call iframe so that they enter a rich, fully engulfed, video call experience — one that truly fills a device's display.

If you're a seasoned developer (or API user, yay!) all you may need to know is that you can now use showFullscreenButton to turn on this UX for your calls. Read on to learn more.

What's the Daily.co API

Our Daily.co video chat API enables developers to quickly add video calls to any site or app. This all begins with only a few lines of code. Our Prebuilt UI demo, is a good example of how the video call embed is rendered on a webpage. Check out our developer docs to learn more.

If you'd like to customize the design of your video call UI, then you're in luck — we support that, too! All you need to do is build on top of the Daily call object.

Designing the full screen experience

We've worked hard to add flexibility to our API, so developers can build with ease. That said, we're constantly learning from teams using our API.

As alluded to earlier in this post, we've had a few customer support requests for a "full-screen" UX. The use case stems from the fact that an embedded iframe video call is generally rather small. The small size of our default embed is great, but the UI is compact. Video feeds are smaller than they could be when compared to an interface that takes advantage of a large display.

All of our UI is responsive, so all we needed to do was develop new UI for this experience. Our in-call design philosophy has always been to keep the focus on the call experience. We do not want to clutter the interface. This is why we've designed the full screen UI to appear when you hover over the iframe. In our design language the full screen UX is secondary to the video feeds and core call control (camera, mic, screen share, etc.) buttons.

To design the experience our design team jumped into Figma to develop some concepts. Ultimately we landed on 4 design directions, with the final direction shown in the video above. (Figma is a fantastic tool. It allowed us to develop a prototype in no time — you can check out our Figma prototype here.

Developers: how to implement

To enable Full Screen mode for your embeds you'll, of course, need to be using our API. Just sign up for a free account to get your developer key. You'll be asked to choose a subdomain for your calls (like you.daily.co/room). Don't worry; it's all free to get started.

Next you'll want to embed a call into your product.

Then just set the showFullscreenButton configuration flag to true. Here's a code snippet for your reference.

<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
<script>
  callFrame = window.DailyIframe.createFrame({
    showFullscreenButton: true,
  });
  callFrame.join({ url: 'https://your-team.daily.co/hello' })
</script>

Just replace the URL in the snippet above with one of your own room URLs, and presto! An embedded video call with full screen functionality.

Of course, there's much more you can do with our API. Check out our REST API for managing and configuring calls, and our JS API for front-end management.

If you have any questions, please contact us. We love to hear from our customers. As this Full Screen release shows, we're glad to get your feedback!