Search code examples
javascriptiframevideoyoutubewysihtml5

Issue with Wysihtml5 and Iframe for videos

Using wysihtml5 by https://github.com/xing/wysihtml5, I've been trying to add a custom way to add videos. I tried the implementation of https://github.com/arvigeus/bootstrap3-wysihtml5/blob/master/src/bootstrap3-wysihtml5.js but when I'm currently running into 2 issues.

1) Refused to display 'https://www.youtube.com/watch?v=OOHYCZLmbyc' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

2) When I submit the form the part is being ignored.

The output when I embed the iframe in the textarea is:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=LzWmhO4zw7M" allowfullscreen="">
    #document
      <html>
         <head>
         </head>
      </html>
  </iframe>
</div>

The output in my log when I submit the form is:

"text"=>"
"

where "text" is the column name in my db

Solution

  • I figured out a fix:

    1) Addind "/v" before "/watch" solved this issue

    I added a script that change the url from:

    https://www.youtube.com/watch?v=OOHYCZLmbyc

    to

    https://www.youtube.com/v/watch?v=OOHYCZLmbyc

    in my context I added this:

    video.src = src["src"].replace("://www.youtube.com/watch", "://www.youtube.com/v/watch")

    2) I found a solution on stackoverflow that suggested to modify a line in the wyshtml5 script so that it ignores the parser:

    See the solution here: https://stackoverflow.com/a/17175438/834161