I am trying to embed youtube clip with iframe.
There is no issue with embedding it but autoplay doesn't work.
I tried this
<iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/{videoId}?autoplay=1"
frameborder="0"
allow="autoplay"
allowfullscreen
></iframe>
Am I missing something?
I am trying in local environment and Chrome.
I think it's work perfect, you need to check your {videoId}, this is an example:
<iframe width="1280" height="720" src="https://www.youtube.com/embed/LXb3EKWsInQ?showinfo=0&autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
You are missing the $ before the {videoId} so the videoId will be replaced with it's value.
<iframe
width="1280"
height="720"
src=`https://www.youtube.com/embed/${videoId}?autoplay=1`
frameborder="0"
allow="autoplay"
allowfullscreen
></iframe>
Related
So i am trying to make a heading text animated with a background video playing within the letters. The code below is my solution which works perfectly on all browsers except safari. Im aware that safari only partially supports clip-path which is probably where the problem lies. I have been wrecking my head trying to think of a solution and need some ideas. Can the code below be altered to make it work on safari or is there perhaps another approach I can take to achieve the same outcome.
An example of what I am trying to achieve can be seen here https://levelup.gitconnected.com/animate-svg-text-with-a-video-background-bf1d03e47600
Scroll down to the life's a beach text with the video in the background.
Help is much appreciated!
<svg>
<defs>
<clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0013208333333333333, 0.002225925925925926)">
<path d="M741.58,421.68V373H613.37V313h71.39V264.7H613.37v-43H736.26V173.06H563.65V421.68Zm-206.13,0V173.06h-49V278.19c0,13.85.71,45.11.71,54.34-3.2-6.39-11.37-18.82-17.4-28.06L381.67,173.06h-47.6V421.68h49V312.29c0-13.85-.71-45.11-.71-54.34,3.19,6.39,11.36,18.82,17.4,28.06l91.28,135.67ZM267.31,297.73c0,50.43-23.09,78.49-57.9,78.49s-58.95-28.77-58.95-79.2,23.08-78.5,57.89-78.5,59,28.77,59,79.21m51.14-.71c0-80.27-44.4-127.86-109-127.86-65,0-110.1,48.3-110.1,128.57s44.4,127.85,109.39,127.85c64.64,0,109.75-48.3,109.75-128.56" />
<path d="M486.4,278.2c0,13.9,0.7,45.1,0.7,54.3c-3.2-6.4-11.4-18.8-17.4-28.1l-88.1-131.4h-47.6v248.6h49V312.3
c0-13.9-0.7-45.1-0.7-54.3c3.2,6.4,11.4,18.8,17.4,28.1l91.3,135.7h44.4V173.1h-49V278.2z" />
</clipPath>
</defs>
</svg>
<div class="video-container">
<video loop autoplay muted playsinline>
<source src="#" type="video/mp4">
<source src="#" type="video/webm">
<img src="#">
</video>
</div>
In my css file I have this -
video {
-webkit-clip-path: url(#clip-00);
clip-path: url(#clip-00);
I'm using svg:foreignObject to create a formatted images on hover. The below strategy works perfectly in Chrome, but the foreignObject is not visible in Safari.
I just can't see it! What am I missing?
The code is given below -
<svg style="margin-top:18.5vw" version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1920 1299" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<foreignObject width="465" height="465" x="308" y="33">
<video loop="" muted="" poster="1.jpg">
<source src="1.mp4" type="video/ogg">
<source src="src/uploads/<p>The filetype you are attempting to upload is not allowed.</p>" type="video/mp4">
</video>
</foreignObject>
<foreignObject width="465" height="465" x="785" y="0">
<video loop="" muted="" poster="src/assets/uploads/gallery_image_1580238733_10_1.jpg">
<source src="src/assets/uploads/460ef464541741014b1620c73c2fa2d7.mp4" type="video/ogg">
<source src="src/assets/uploads/<p>The filetype you are attempting to upload is not allowed.</p>" type="video/mp4">
</video>
</foreignObject>
</svg>
Any suggestions greatly appreciated.
you should encode the character to hex, but i don't know the reason right now!
function encodeSVG(svg) {
return svg.replace(/[\x00-\xff]/g, i => {
return `&#${i.charCodeAt()};`
})
}
I have this simple HTML:
<html>
<body>
<embed src="test.svg" type="image/svg+xml" style="border:3px solid green;width:200px;height:200px;overflow:scroll;">
</body>
</html>
And a simple SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:3px solid red;width:500px;height:500px;overflow:auto;">
<circle cx="50" cy="250" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>
The output from browsers:
[1,1] Edge: OK
[2,1] IE11: OK
[1,2] Chrome55: Not scrollable
[2,2] Firefox50: Scrollable at a negligible degree
How to ensure Firefox and Chrome able to have scrollable <embed> with overflow-ed SVG content, as in Edge and IE?
Thank you.
just put a div around the embed und use that as scrolling area...
<html>
<body>
<div style="border:3px solid green;width:100px;height:100px;overflow:scroll;">
<embed src="https://upload.wikimedia.org/wikipedia/commons/e/e9/SVG-Grundelemente.svg" type="image/svg+xml">
</div>
</body>
</html>
to match the behaviour of MS browsers, you have to extend your viewBox to contain all elements you want to be able to scroll to...
given the appropiate width and height should do want you want then...
You can as well roll your own zoom and pan solution using svgDocuments currentTranslate and currentScale properties... I would be curious how currentTranslate behaves for this weird MS behaviour...
How can i add my google maps into an svg element?
I want to fill svg with map.
The map appears but stretched and out of the svg shape
To teste the code you have to insert an src link in iframe.
My code:
svg
{
stroke: red;
}
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<foreignObject id="map" width="560" height="349">
<iframe width="560" height="349" frameborder="0" style="border:0" src="LINK + API_KEY" allowfullscreen></iframe>
</foreignObject>
<path fill="url(#map)" d="M 50 15, 100 25, 100 100, 50 100, 0 100, 0 25Z" />
</svg>
Thank's
Here's a solution based on Yoksel's "Masking video with SVG Clippath". The placeholder video is just to provide a working public iframe. To use this solution you'll have to redefine the <path> to have the right sizing (if you're lucky, you'll just be able to use percentages like Yoksel did).
(#yoksel are you the same Yoksel?)
.svg {
width: 560px;
height: 349px;
}
<svg class="svg">
<clippath id="my-clippath">
<path d="M 50 15, 100 25, 100 100, 50 100, 0 100, 0 25Z"></path>
</clippath>
<g clip-path="url(#my-clippath)">
<foreignObject width="560" x="0" y="0" height="349">
<iframe width="560" height="349" src="https://www.youtube.com/embed/NpEaa2P7qZI" frameborder="0" allowfullscreen></iframe>
</foreignObject>
</g>
</svg>
I have been trying to get A css blur effect in IE 11 for hours and did not make any progress. I tried to use the following simple html:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.blur{
-ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50');
}
</style>
</head>
<body>
<img src='http://img3.wikia.nocookie.net/__cb20120627075127/kirby/en/images/0/01/KDCol_Kirby_K64.png' class="blur" />
</body>
</html>
I also tried just using the filter without the ms prefix. I saw that filter code on http://jsbin.com/ulufot/31/edit and even consulted the microsoft example http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm which does not work in my IE 11 on Win7. Do you have any ideas, what I could be doint wrong?
probably interesting if you are struggling too: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
According to this blog (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) the blur filter was dropped after IE9:
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
They did give a solution called StackBlur (using JavaScript and Canvases):
http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
It is in the form of a javascript add-on downloadable from that site.
Here's a solution that works in IE10+ by using SVG:
https://jsfiddle.net/joegeringer/g97e26pa/8/
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">
<filter id="svgBlurFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />
<image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />
</svg>