youtube-extension
youtube-extension copied to clipboard
Allow 'openLinksInNewWindow' affect the link inside the svg when 'smoothLivePreview' is true
var svg =
'<div class="youtube-preview" style="width:%2; height:%3; background-color:#333; position:relative;">' +
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ' +
...
'</svg>' +
'<div style="text-align:center; padding-top:10px; color:#fff"><a (TARGET "_BLANK" HERE) href="%1">%1</a></div>' +
'</div>',
Is it reasonable? Also sorry if i don't do it myself but i have very low experience with Git and JS
Ok thanks.
Anyway i manually removed the link and added a simple paragraph along the lines of "your video will be correcty embedded" with a more readable color.
I did this because the link wasn't readable because of its blue color; i checked the code now and it has a "color:#fff" in the div wrapping the link, but it doesn't affect the link itself (at least not in firefox).
However, i just tried <a style="color:#fff" href="%1">%1</a>
and it works as expected, even though i still prefer to clearly inform that that particular element of the preview is not in a "final view state"
¿Maybe the color issue is my own problem?
I had a good look at it and I really don't know why the link is even there in the first place. (I think it was an artifact from smoothLivePreview is supposed to be used in live editors, as a placeholder, to reduce the burden placed in the browser.
For instance, let's say you're using angular to create a live editor like this one. Every time the user types one character, showdown reads all text and parses it. Now, let's say you have 5 youtube videos in your live md text. Then it means everytime the user types a character, those 5 videos are recreated again (means 5 requests to youtube + loading the iframe).
That can be extremely laggy.
using smoothLivePreview prevents this since all is shown to the user is an image (or a SVG)
Yes, i use it in a live previewer also.
Even if there is only 1 video, it will constantly flicker (or completely disappear) as you type because the iframe starts empty and then fills itself with the video thumbnail.
So using smoothLivePreview
is a clear choice here.
But then i see 2 problems with the svg placeholder:
- The link inside it is not readable in blue color (this is how i see it in firefox, even with a "color: white" in the wrapping div)
- The end user may be confused, not knowing that the svg placeholder will be correctly replaced by the real iframe in the final view (when i finally parse the complete user input without smoothLivePreview)
- Link always opens in the same tab (although i now know how to manually fix that and always open in new tab)
My own initial approach to solving these was switching the link for a simple informative line "your video will be correctly embedded" However, i currently think that it can get confusing if the end user puts a lot of videos, so keeping the link can be a good idea