Sozi is an inkscape extension that allows Prezi-like panning/zooming of an svg file when viewed in an svg-enabled web browser. A youtube video can be embedded in a Prezi, and I'd like to be able to embed a youtube video (or any kind of video) in an svg. I know that html links can be made in svg documents (and inkscape supports this directly). Is there a way to embed a video (via an iframe or video tag?) into an svg?
Videos can be embedded directly into an SVG by wrapping them in a <foreignObject> element. The example below applies a color filter to the embedded foreignObject element and its children.
SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.
On a computer, go to the YouTube video or playlist that you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.
<foreignObject width="560" height="349">
<iframe xmlns="http://www.w3.org/1999/xhtml"
width="560" height="349"
src="http://www.youtube.com/embed/YOUR-MOVIE-ID"
frameborder="0"></iframe>
</foreignObject>
That should do the trick. Be careful, that the xmlns
attribute stays on the iframe element. foreignObject
is explained here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With