Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

267
Views
Is it possible to embed an iframe element in a fabricjs canvas to insert a youtube video into it?

I need to embed a youtube video in a fabricjs canvas. I have tried to do this by inserting an iframe element into a fabricjs image object. This has worked for me to insert a element into the canvas before. However, when inserting an iframe it is not possible.

<input type="text" name="enlace-video" id="enlace-video-yt"  value="" placeholder="http://">
<button id="input-video-yt">
    Insert YT video
</button>
const ytVideo = document.getElementById('input-video-yt');
ytVideo.addEventListener('click', function (){

    var ytvideoURL = document.getElementById("enlace-video-yt").value;
    var embedURL = ytvideoURL.replace("watch?v=","embed/");

    var divVideo = document.createElement('div');
    document.body.appendChild(divVideo);

    var iframe = document.createElement('iframe');
    iframe.id="new-video";
    iframe.src = embedURL;
    divVideo.appendChild(iframe);

    iframe.addEventListener( "loadedmetadata", function (e) {
        
        var fab_video = new fabric.Image(iframe, {left: 100,   top: 50, data: "video"});
        canvas.add(fab_video);

    }, false );
});

Any other way that makes it possible to insert a youtube video into the canvas would work for me.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

To add YouTube Video in canvas, you will need to create a video html tag and assign source to YouTube video link, and then add that video in Canvas as shown in

Demo: http://fabricjs.com/video-element

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!