createFrame()
createFrame(parentEl, {properties})
Use this method to create a DailyIframe
element and insert it into the DOM.
Both arguments are optional. If you provide a parentEl
, the new DailyIframe
will be appended as a child of that element. Otherwise, the new DailyIframe
will be appended as a child of document.body
.
The second argument is a properties
object. If you don't set at least the url property here, you'll need to set it later when you call the join()
or load()
method.
Styling the DailyIframe
iframeStyle
You can set the CSS properties of the new DailyIframe
by passing a javascript-style css properties hash in the iframeStyle
property, like so:
The default iframeStyle
(styles applied to the iframe
if you don't supply any) depend on whether the new DailyIframe
is a child of document.body
or not. If the new DailyIframe
is a child of document.body
, the defaults position the iframe
as a floating window in the bottom right of the page. If, on the other hand, you specify a parentEl
deeper in the DOM tree, the defaults fill the width and height of the parent element.
layoutConfig
When the default Active Speaker View is turned off (through the activeSpeakerMode
iframe property or setActiveSpeakerMode()
method), Grid View can be customized via a layoutConfig
iframe property. layoutConfig
specifies the maximum and minimum participant tiles per page when a browser is resized:
destroy()
on an existing one before creating a new one. Duplicate call frame instances will result in a plethora of issues and loud warnings. Starting in daily-js
0.45.0, createFrame()
throws an Error
if multiple call frame instances are detected.createFrame() in action