react-draft-wysiwyg 🚀 - YouTube embedding doesn't work

+1 same issue. @jpuri and your demo doesn't work either.

ZeroCho on 3 Jan 2017

Try this one @kitze, @ZeroCho : https://www.youtube.com/embed/bNU397ZEx5w

jpuri on 3 Jan 2017

👍3

@jpuri should be pretty easy to grab the id via regex and convert it to an embed link manually. You don't want a lot of users to try and paste a youtube link and to think that your lib is broken :)

kitze on 3 Jan 2017

@jpuri
could you please fix this in your demo?

ZeroCho on 6 Jan 2017

@kitze: embedding link feature works only with embeddable links and normal youtube link is not embeddable. I can go on to parse and fix youtube link but there can be many non-embeddable links and I can not possible support all of them. A possible solution could be to provide a callback property to developers to parse and provide right link to editor.

@ZeroCho: thanks for pointing docs issue just fixed it.

jpuri on 6 Jan 2017

👍4

embed.ly can be very useful here to support data extraction for a number of URLs. But its paid :(

I am looking for nice open-source alternate to embedly to fix this issue.

jpuri on 12 Feb 2017

I am planning to provide a callback for developers to extract data from the URL and give back to editor. If the user does not provides the callback the url will be embedded as such in an iframe.

At least for demo I plan to use embed.ly.

jpuri on 13 Feb 2017

@jpuri , I have solved this problem with a very small trick that took me just 1-2 minutes. I have changed addEmbeddedLink function by processing the users' input transforming the Youtube simple links into embedded ones.

  addEmbeddedLink: Function = (embeddedLink, height, width): void => {

    if (embeddedLink.indexOf("youtube") >= 0){
      embeddedLink = embeddedLink.replace("watch?v=","embed/");
      embeddedLink = embeddedLink.replace("/watch/", "/embed/");
      embeddedLink = embeddedLink.replace("youtu.be/","youtube.com/embed/");
    }
......

At least for me it works :smile:

ibudisteanu on 18 Jun 2017

👍6

@jpuri How is this feature going on? Any progress? Need help?

gazpachu on 20 Oct 2017

Hey, can somebody explain me how to use embeddedlinkparser? Everything i tried doesn't work.

ghost on 16 Apr 2018

Editor still does not support this @ibrod1983 , I will try to soon add this.

jpuri on 16 Apr 2018

Thank you for your reply. It's really important for me to be able to automatically convert the youtube link, to an embeddable one. I managed to integrate ibudisteanu's code into the addEmbeddedLink function, in the Embedded class.

It worked, but for some reason i was getting various JS errors, with or without this additional code. I have very little experience in editing third party libraries. What i did was: downloaded the full code from this repository; did npm install; removed the "-master" ending from the directory; did npm run build. Did i perhaps miss something? Can u refer me to some guide, that will assist me in editing the code of this library by myself?

Any help will be greatly appreciated :-)

ghost on 17 Apr 2018

Hey @ibrod1983 :

The steps you have followed above are ok. After build how are you using library in ur project ?
As file system dependency ? That can cause those JS errors.

Try this tool: https://www.npmjs.com/package/yalc

If you can paste error here it will help me judge better.

jpuri on 17 Apr 2018

To be honest, I'm not sure what you mean by "file system dependency". I'm using it, as if it were installed by "npm install". I took the code from github, and copied it to the node_modules directory of my react project. After running the npm install(from the module directory), and running the build, this is what i get in react:

invariant.js:42 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). at invariant (invariant.js:42) at Object.addComponentAsRefTo (ReactOwner.js:68) at attachRef (ReactRef.js:23) at Object.ReactRef.attachRefs (ReactRef.js:42) at ReactDOMComponent.attachRefs (ReactReconciler.js:23) at CallbackQueue.notifyAll (CallbackQueue.js:76) at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80) at ReactReconcileTransaction.closeAll (Transaction.js:209) at ReactReconcileTransaction.perform (Transaction.js:156) at batchedMountComponentIntoNode (ReactMount.js:126)

And also:

react-draft-wysiwyg.js:6 Uncaught TypeError: Cannot read property 'focus' of undefined at react-draft-wysiwyg.js:6

It seems that the editor is working, despite those errors.

Edit: I've used "yalc publish" on a freshly downloaded copy of the repository, then copied it to the node_modules of my React project- and it works fine(no clue why, of course :-)).
The question now is, how would i be able to test changes to the library, without repeating the whole process again and again? Sorry for all the questions, i'm just very new to this..

ghost on 17 Apr 2018

Error is that now its getting 2 copied of react. Delete node_modules created inside node_modules/react-draft-wysiwyg that should fix this error.

jpuri on 17 Apr 2018

I see...thank you very much

ghost on 17 Apr 2018

👍1

Let me know if you still face any issue.

jpuri on 17 Apr 2018

@jpuri embed link not working with normal URL plz fix

DungBuiDeveloper on 24 Oct 2018

Any updates @jpuri?

I think the most used videos are youtube and vimeo, another videos could be only src that user pasted.

```
const Embed = ({ block, contentState }) => {
const entity = contentState.getEntity(block.getEntityAt(0));
const { src, height, width } = entity.getData();
return ();<br /> };</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/3528126?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="iamtchelo picture"> <strong>iamtchelo</strong> <span class="text-muted ml-1">on 5 Apr 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Not work for me....</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/17035019?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="julespaget picture"> <strong>julespaget</strong> <span class="text-muted ml-1">on 24 Feb 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>Not work for me....</p> </blockquote> <p>i think you have to change "addEmbeddedLink" to embedCallback<br /> so it should be something like this : </p> <pre><code class="prettyprint"><Editor toolbar={{ embedded:{ embedCallback: embedVideoCallBack } }} /> </code></pre> <p>function : </p> <pre><code class="prettyprint">const embedVideoCallBack = (link) =>{ if (link.indexOf("youtube") >= 0){ link = link.replace("watch?v=","embed/"); link = link.replace("/watch/", "/embed/"); link = link.replace("youtu.be/","youtube.com/embed/"); } return link } </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/5328749?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="AhmadYoussef picture"> <strong>AhmadYoussef</strong> <span class="text-muted ml-1">on 14 May 2020</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I need to allow only YouTube URL but embedded only accept URL in return, is there anyway where I can override or something to solve my problem.</p> <p><strong>_embedded: embedCallBack: This callback is called after user add a url to be embedded, it can be used to do any required modifications to the url. The callback is passed a url and should return url only._</strong></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/7413420?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="classicalrehan picture"> <strong>classicalrehan</strong> <span class="text-muted ml-1">on 9 Jul 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>This url helped me to fix my bug : <a rel="nofollow noopener" target="_blank" href="https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/Embeddable/index.js">https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/Embeddable/index.js</a></p> <p>Thanks <strong>@jpuri</strong> </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/25312957?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="maxgfr picture"> <strong>maxgfr</strong> <span class="text-muted ml-1">on 18 Oct 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(198537118, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(198537118, 1);" onclick="rate(198537118, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(198537118, 2);" onclick="rate(198537118, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(198537118, 3);" onclick="rate(198537118, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(198537118, 4);" onclick="rate(198537118, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(198537118, 5);" onclick="rate(198537118, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/react-draft-wysiwyg/338388659/selenium-testing-with-react-draft-wysiwyg">Selenium Testing with react-draft-wysiwyg</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/802938?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="trongbang86 picture"> <strong class="pr-1" dir="ltr">trongbang86</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-draft-wysiwyg/291989952/is-there-a-way-to-make-react-draft-wysiwyg-as-a-single-line">Is there a way to make react-draft-wysiwyg as a single line input?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/151924?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="sontek picture"> <strong class="pr-1" dir="ltr">sontek</strong>  ·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-draft-wysiwyg/275679917/draftjs-pastehandler-not-accessible-to-handle-pasted">draftjs PasteHandler not accessible to handle pasted formatted content</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/12593377?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Pixelatex picture"> <strong class="pr-1" dir="ltr">Pixelatex</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-draft-wysiwyg/222282950/how-to-remove-icons-from-toolbar">How to remove icons from toolbar?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/4948588?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="gyarasu picture"> <strong class="pr-1" dir="ltr">gyarasu</strong>  ·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/react-draft-wysiwyg/308859985/how-to-use-react-draft-wysiwyg-in-react-native">How to use react-draft-wysiwyg in React Native?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/16882802?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Leadrive picture"> <strong class="pr-1" dir="ltr">Leadrive</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/jpuri/react-draft-wysiwyg/issues/155" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>

React-draft-wysiwyg: YouTube embedding doesn't work

Most helpful comment

All 23 comments