I've been trying to place an embedded video into SVG element so it plays automatically on the background. I was able to fill the SVG with an image the way I wanted using the pattern, but I can't do the same thing with the video. I'd prefer the most simple solution (such as fill:url(#image) in the example) that will do the trick. Any help?
svg {
width: 300px;
height: 300px;
} <svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
viewBox="0 0 534 503" style="enable-background:new 0 0 534 503;" xml:space="preserve">
<defs>
<pattern id="image" patternUnits="userSpaceOnUse" height="100%" width="100%">
<image x="0" y="0" height="100%" width="100%" xlink:href=".jpg"></image>
</pattern>
</defs>
<style type="text/css">
.st0{fill:none;enable-background:new ;}
.st1{fill:url(#image);stroke:#ccc;stroke-width:20;stroke-miterlimit:10;}
</style>
<path class="st0" d="z"/>
<polygon class="st1" points="268,81 333,12 457,12 524,68.5 524,206 268,491 10,207 10,66 77.5,12 202,12 "/>
</svg> I've been trying to place an embedded video into SVG element so it plays automatically on the background. I was able to fill the SVG with an image the way I wanted using the pattern, but I can't do the same thing with the video. I'd prefer the most simple solution (such as fill:url(#image) in the example) that will do the trick. Any help?
svg {
width: 300px;
height: 300px;
} <svg version="1.1" id="Layer_1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px"
viewBox="0 0 534 503" style="enable-background:new 0 0 534 503;" xml:space="preserve">
<defs>
<pattern id="image" patternUnits="userSpaceOnUse" height="100%" width="100%">
<image x="0" y="0" height="100%" width="100%" xlink:href="http://i.imgur./7Nlcay7.jpg"></image>
</pattern>
</defs>
<style type="text/css">
.st0{fill:none;enable-background:new ;}
.st1{fill:url(#image);stroke:#ccc;stroke-width:20;stroke-miterlimit:10;}
</style>
<path class="st0" d="z"/>
<polygon class="st1" points="268,81 333,12 457,12 524,68.5 524,206 268,491 10,207 10,66 77.5,12 202,12 "/>
</svg> Fiddle: https://jsfiddle/vp2fhwy7/
Share Improve this question edited Apr 4, 2017 at 12:32 Dwhitz 1,2708 gold badges27 silver badges39 bronze badges asked Apr 4, 2017 at 12:18 followthemadhatfollowthemadhat 1091 gold badge2 silver badges10 bronze badges2 Answers
Reset to default 3You can embed a video with the foreignobject tag
<foreignObject width="853" x="0"y="0" height="480">
<body xmlns="http://www.w3/1999/xhtml">
<iframe width="853" height="480" src="//www.youtube./embed/dkiuuMfoGvM" frameborder="0" allowfullscreen></iframe>
</body>
</foreignObject>
https://jsfiddle/vp2fhwy7/1/
use a clipPath
svg
<clipPath id="clip">
<polygon class="st1" points="268,81 333,12 457,12 524,68.5 524,206 268,491 10,207 10,66 77.5,12 202,12 "/>
</clipPath>
html
<iframe width="560" height="315" src="https://www.youtube./embed/W4PR4vNOxfE" frameborder="0" allowfullscreen></iframe>
css
iframe {
-webkit-clip-path:url(#clip)
}