Toggle full screen mode, with our video call API

Learn how to use our showFullscreenButton configuration option for your API video calls

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.

<iframe src="https://player.vimeo.com/video/373503093" width="640" height="400" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

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 ["Super Simple Demo"](https://docs.daily.co/docs/demos#section-1-super-simple-demo), is a good example of how the video call embed is rendered on a webpage. Check out our [developer docs](https://docs.daily.co/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 [write some CSS](https://docs.daily.co/docs/css-for-custom-layouts).

## 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](https://www.figma.com/proto/vgTMi2arweCExH33Ub5GUn/API-In-Call-Full-Screen-Mode?node-id=11%3A607&viewport=318%2C264%2C0.14644969999790192&scaling=min-zoom).

## 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](https://www.daily.co) 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](https://docs.daily.co/docs/front-end-hello-world) into your product.

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

   -- CODE language-markup --
    <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](https://docs.daily.co/reference) for managing and configuring calls, and our [JS API](https://docs.daily.co/reference#using-the-dailyco-front-end-library) for front-end management.

If you have any questions, please [contact us](https://www.daily.co/contact-us). We love to hear from our customers. As this Full Screen release shows, we're glad to get your feedback!

Recent posts