Graphics Reference
In-Depth Information
Now that we have obtained a reference to the target container using jQuery
and put the iframe code in a variable, we can add the HTML snippet for the
iframe to the container with
container.html(map)
. The final script for inject-
ing the code can be used in the event
compositionReady
, for example, and
looks as follows:
var container = sym.$("container");
var map = '<iframe width="'+container.width()+'"
height="'+container.height()+'" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.de/maps?ie=UTF8&q=adobe
+san+francisco&fb=1&gl=de&hq=adobe&
amp;hnear=0x80859a6d00690021:0x4a501367f076adff,San+
Francisco,+California+United+States&c
id=0,0,7657507985557832261&11=37.771401,-
122.401989&spn=0.006295,0.006295&t=m&iwlo
c=A&output=embed"></iframe>';
container.html( map );
In this example, the iframe code was slightly modified so that the loaded map
exactly fit the target container. To do this, the static values for
width
and
height
were replaced by the
container.width()
and
container.height()
values.
7.1.3 Videos (YouTube)
The iframe option is widely used. You can also use it to integrate videos from
platforms like YouTube:
var container = sym.$("container");
var youtube = '<iframe width="'+container.width()+'"
height="'+container.height()+'" src="http://www.you
tube.com/embed/CBF92LoXziU" frameborder="0" allow
fullscreen></iframe>';
container.html(youtube);
.
jQuery UI
jQuery UI offers numerous ap-
plication components such as
accordions, buttons, dialogs, menus,
and various input components. The
jQuery UI requires jQuery.
Here again, the size of the iframe, and thus the actual video, is adapted to
fit the container. If you want to use an overlay in which the video appears, you
should look at the Spotlight feature of Edge Commons in section 7.4.3.
