5.2. The iframe editor dialog box

By default, an iframe element is rendered by embedding a Web browser in the styled view.

Figure 2. An embedded web browser displaying a sample YouTube™ video
An embedded web browser displaying a sample YouTube™ video
[Note]

This feature, which is based on JavaFX®, will not work if the Java™ runtime used to run XXE is older than version 1.8.0_40. Moreover, this feature may be explicitly disabled by unchecking Options → Preferences, General|Feature, "In the styled view, render audio and video elements by embedding a media player" in XMLmind XML Editor - Online Help.

A newly embedded Web browser is not configured yet (e.g. does not point to any HTML content) and just looks like an empty gray rectangle.

Figure 3. The right-click popup menu of the embedded Web browser
The right-click popup menu of the embedded Web browser

In order to configure a media player, you may either:

  • double-click inside it;

  • OR right-click in it and select the Edit menu item;

  • OR drag and drop an HTML file onto it.

The three above actions all display the iframe editor dialog box.

Figure 4. the iframe editor dialog box
the iframe editor dialog box

An iframe element is configured as follows:

  1. Specify the location of the HTML page to be displayed by the embedded Web browser. This location may be an absolute or relative URL. A relative URL is relative to the URL of the document being edited.

    This field corresponds to the src attribute of the iframe element.

  2. Optionally, give a width and/or a height to the iframe. These dimensions are specified in pixels. The default size is 300x200. When a single dimension is specified, the other dimension is automatically computed using a 2:1 width/height ratio.

    These fields corresponds to the width and height attributes of the iframe element.

  3. Optionally, specify security options for the HTML content of the iframe element by checking one or more security option checkboxes.

    Note that settings such security options have no effect on the Web browser embedded in the styled view of XXE. These checkboxes correspond to values of the sandbox attribute of the iframe element. For example, checking "Apply all security rules" alone adds attribute sandbox="" to the iframe element. Other example, checking "Apply all security rules" then "Allow popups" and "Allow scripts" adds attribute sandbox="allow-popups allow-scripts" to the iframe element.

[Tip]

The simplest and quickest way to fill the fields of the above dialog box is:

  1. Using your Web browser, visit the YouTube page containing your video.

  2. Right-click the video and select entry "Copy embed code" from the contextual menu.

  3. Click the button.

    This button parses the content of the clipboard (which expected to contain something like <iframe...src="...) and then uses the results to initialize some of the fields of the above dialog box.