HTML and CSS Reference
In-Depth Information
Suppose we want to embed the video with the embedding code presented in Listings 13-5 and 13-6.
Listing 13-5.
New Embed Code for Example Video Suggested by YouTube
<iframe width="560" height="315" src="//
www.youtube.com/embed/WgL7DMiTCAY
"
frameborder="0"
allowfullscreen></iframe>
Listing 13-6.
Old-Style Embed Code for Example Video Suggested by YouTube
<object width="560" height="315"><param name="movie" value="//
www.youtube.com/v/
WgL7DMiTCAY?hl=en_US&version=3
"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always"></param><embed src="//
www.youtube.com/v/
WgL7DMiTCAY?hl=en_US&version=3
" type="application/x-shockwave-flash" width="560" height="315"
allowscriptaccess="always" allowfullscreen="true"></embed></object>
In XHTML, the old-style embedding should be preferred and modified accordingly (Listing 13-7).
Listing 13-7.
The Standardized Embedding Code in XHTML/HTML5
<p>
<object type="application/x-shockwave-flash"
width="560" height="315">
<param name="movie"
value="//
www.youtube.com/v/WgL7DMiTCAY?hl=en_US&version=3
" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
</p>
■
the nesting rules of the applied document type should not be forgotten. in XhtML 1.0 strict, the
object
element should be wrapped in a container element such as
div
or
p
; otherwise, the code will not validate.
Note
The same code can also be used in HTML5, where the
embed
element could also be preserved; however, it can be
safely removed: the first two lines ensure browser-independence. In HTML5, the new-style embedding code can also
be used. It can be standardized by removing the
frameborder
and
allowfullscreen
attributes (Listing 13-8).
Listing 13-8.
A Standard-Compliant YouTube Embedding in (X)HTML5
<iframe width="560" height="315" src="//
www.youtube.com/v/WgL7DMiTCAY?hl=en_US&version=3
">
</iframe>
Search WWH ::
Custom Search