YouTube Links vs Embeds vs WordPress Automunge

Some of this will depend on the esoterica of HTML “quoting” and special character stealing.

For that reason, first you ought to review this article:

https://chiefio.wordpress.com/2013/04/10/urls-html-unicode-wordpress-antics/

Now, just to make your head spin a little, notice that in that article I type the special unicode sequences to give you special characters AND the special sequences to have them show up on the screen as regular character strings (instead of substituting the special character itself.) There is a peculiar art to thinking in quotes and quotes of quotes…

So, for example, the & character can be just typed. The Unicode to give an ampersand is & but that will show up as & if you don’t ‘quote it right’, but that means turning some of the OTHER special characters into Unicode so they are not stolen by wordpress and used as part of ONE unicode character. So I turned the first & of the & into unicode as & to get it to display. Repeat with recursion as necessary to get what I just did here…

OK, so I’m going to be working one level deeper in the recursive quoting pile to make some of this show up in addition to “doing what it does”. That level will be left “as an exercise for the terminally curious”…

Now, first up, realize that what WordPress does in an article as I am typing it is sometimes different from what it does in a comment. So in fact I’ll need to keep track of two different things in two different places while doing 2 to 3 different levels of quoting. This is the kind of stuff that drives folks crazy (but that Geek Types curiously enjoy as a challenge.)

YouTube URL vs EMBEDS

There are several different places you can pick up a YouTube name to put it into an article or a comment. They are somewhat different and you need to be able to keep track of who is a what.

Realize, too, that some search engines (like Google…) will sometimes put their own ‘wrapper’ on a search result so that it gives them credit for the link. I always watch for that and strip it out. They are the very very long multiple line URLs that start with google.com instead of your target address and somewhere further down the line have html:foo for your actual target. I avoid Google (prefering the non-track-me search engines like https://duckduckgo.com.

Which brings up the “basic html href to a link” syntax. For many links, you can just paste it into a comment and WordPress will turn it into an active link. Type or paste “https://duckduckgo.com” and it becomes a live link. You can do the “make it live” explicitly with an href wrapper like:

<a href=”https://duckduckgo.com”>Display Text that can be the link</a>

Similar things can be done with a YouTube so that the display text can say something descriptive and the video is not displayed but linked. So something like “Watch This Lady Gaga Vid I like” as the display text and the youtube URL in the quoted string of the href. But which YouTube URL?

So say I’m watching a YouTube. At the top of my browser is the URL to get to it:

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

this is just the site name and a tag to point at a particular video. that v={whatever}. Just paste it in on a line by itself, you get the video:

It does the same thing in both articles and comments, BTW. Simply paste the URL, get the video.

Now one fancy fix would be to put that in an html href wrapper:

<a href=”https://www.youtube.com/watch?v=QeWBS0JBNzQ”>Love This Edge Of Glory by Gaga!</a>

(BTW, to make that display and prevent WordPress from stealing the link inside and activating it as a simple ‘paste’, I had to change the : to &#058; and the angle brackets to unicode as well. Oddly, to get the : unicode to display, I had to substitute BOTH the & and the # where # is &#035; but I recurse… )

Which gives:

Love This Edge Of Glory by Gaga!

At one time you could also get a link to display and NOT be active just by slamming text up against it, but WordPress seems to have “fixed that” now as testing in both an article and a comment had them both detect and activate the link. Oh Well, things change. However, while it activates the link, it does not display the video, so for example:

Look at this pasted video URL on this line: https://www.youtube.com/watch?v=QeWBS0JBNzQ

It is also possible to deactivate a link just by putting gratuitous white space in it, like a gap between https and the : but that’s pretty simple stuff.

Look at this video: https ://www.youtube.com/watch?v=QeWBS0JBNzQ

These work the same both in articles and in comments. (NOW, but I’m pretty sure it was different a few years ago when pasted into an article. Then, pasted links did not auto-activate without an html wrapper, but do remember “things change”…)

Just below the video at YouTube is a little ‘share’ button. When you click it, it gives you a choice of ‘share’ or ’embed’. The “share” URL it gives is:

https://youtu.be/QeWBS0JBNzQ

When pasted into things, it is activated just like the regular URL line from the top of the YouTube page. Why they have two different URLS that do the same thing is an interesting question, but there it is. Note that the video name text “QeWBS0JBNzQ” is the same in both.

If you choose “embed” the text it gives you has controls for things like height and width:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/QeWBS0JBNzQ” frameborder=”0″ allowfullscreen></iframe>

Pasted into an article, WordPress turns that into

[youtube https://www.youtube.com/embed/QeWBS0JBNzQ&w=560&h=315]

which then displays as:

Note the different size compared to the straight paste up top.

BUT, pasted into a comment shows nothing on the screen, but has this in the text I see when I edit that comment:

<a href=”” rel=”nofollow”></a>

Since WordPress tries to convert it to something it likes but instead just strips out all the guts of it… This usually shows up when someone wants to change the display size of a video and tries the embed code. It has choices of sizes under the “more” tab…

In Conclusion

Hopefully this is useful to folks wondering at what the heck WordPress did to their video paste.

It is in response to a request from llanfar here:

https://chiefio.wordpress.com/2017/02/01/week-2-of-1-a-t/#comment-79435 and even though Gail already tipped him about the “paste on a line with text” which is all that’s really needed for that use case, I just could not resist the challenge of doing nested recursive unicode in the context of YouTube links and how WordPress does “special” things to it ;-)

With luck, this will be interesting, even if ‘way overkill’ ;-)

Subscribe to feed

Advertisements

About E.M.Smith

A technical managerial sort interested in things from Stonehenge to computer science. My present "hot buttons' are the mythology of Climate Change and ancient metrology; but things change...
This entry was posted in Tech Bits, Tips and tagged , , , . Bookmark the permalink.

22 Responses to YouTube Links vs Embeds vs WordPress Automunge

  1. llanfar says:

    Thanks. And to check if just leading white space kills the embed, a melodic metalcore version of Lady Gaga (probably okay at work, unlike some of their stuff – great band for this mid-50’s music major(s) (6 majors, never graduated) software dude):

    In This Moment – Sick Like Me

  2. Verity Jones says:

    Thanks EM, that’s useful. Changes of this sort drive me nuts. I usually hate being beaten and work them out myself, but I’ve bookmarked the page to save time.
    Today M$ Word persistently tried to turn text into a numbered list for me (I know – but I am stuck with it in work). I had a table and I needed the first cell in each row to start with a number (row 1: “1. Point A blah blah blah”; row 2: “2. Point B blah blah blah” etc.), but without indenting. Yeah I could have changed formatting to get it looking how I wanted, but the quick fix was to put a non printing character after the point “1.*Point” (where * is my lazy representation of a non printing character.). In short I could rant all day about programmes second guessing what I want to do.

  3. E.M.Smith says:

    Well, gratifying to see it the time spent typing and testing the posting is helping folks!

    Oh, and feel free to post “tests” of things to see how it really works. It’s OK to play and test here.

  4. LG says:

    @E.M.Smith
    I’ve been racking my brain to get images to show in comments.
    I’ve tried angled-bracket-imgsrc-equals-image-source-url-forward-slash-closed-angled-bracket approach to Zero success.
    Wordpress seems to be eating it up.
    What am I not doing wright ?

    Please advise
    Thanks
    LG

  5. E.M.Smith says:

    You are fighting WordPress as it tries to “help” you. Just paste in the URL of the image, unadorned. ANYTHING inside angle brackets that WordPress doesn’t understand, it just removes…

    Here is an example of setting the width (that I think is ignored in comments):

    https=//chiefio.files.wordpress.com/2017/02/spyvsmix_electionnov2017.gif?w=720

    Yup, just tested it and it is the same with the w=720 or without.

    Feel free to try things. If you don’t like the result just say “Please remove the comment above” and point to it and I’ll make it, and the request, “go away”.

  6. LG says:

    Testing unadorned link to image:

    https: //www.wpc.ncep.noaa.gov/noaa/noaad2.gif?w=720

  7. E.M.Smith says:

    When I paste that url into my browser it just spins forever. Are you sure that image is available?

    I’ve pasted a different url into your comment and it works…

    try this one

  8. LG says:

    Trying once more (global Temperature gif) 2 ways.
    As is.

    Then with w=720

  9. E.M.Smith says:

    @L.G.:

    Well, we’ve established that the paste in works, that the other URL is broken (or non-existant0 and that the size setting doesn’t work with WordPress oomments (but does with articles).

    Does that take care of things for you?

  10. LG says:

    @E.M.Smith
    Thanks !!!!
    I’ll keep experimenting.
    I suspect that an old Climate Audit assistant greasemonkey script in my browser is muddying things up.

  11. E.M.Smith says:

    @L.G.:

    Well, all I’ve seen so far is that the first link you tried is a busted link (didn’t work for me either) and when you tried the temperature gifs it worked just as expected. (simple post, it shows up, and WordPress ignores the size info in comments).

    Unless you are seeing some other failure I’m not seeing, it looks like “done” to me…

  12. Larry Ledwick says:

    That broken link works if you remove the https

  13. E.M.Smith says:

    @Larry:

    Interesting. With http on it, it works, with https it does not, so stuck in security protocol negotiation.

    Interesting. That likely means they are running an old deprecated TLS or worse cypher that recent browsers no longer support… I ought to have thought of that…

    http ://www.wpc.ncep.noaa.gov/noaa/noaad2.gif

    Who knew?

  14. Larry Ledwick says:

    EM something going on with that Noaa Map image above. Like it is trying to load something else as part of the image due to wordpress. If loaded all by itself in a browser (fire fox) is loads instantly, but here on your blog the image paints immediately but the browser continues to spin for a while before it times out what ever it is doing. (maybe checking cookies or something else – I don’t know what to look for, maybe it is just a wordpress thing).

  15. Larry Ledwick says:

    About a 90 second delay.

  16. E.M.Smith says:

    @Larry:

    I see that… I’ve got the spinning meatball on this page tab. I’m going to suppress that image for a reload and see if it stops. I usually get that on pages with LOTS of videos in it as they are caching a lot of stuff…

    UPDATE: I think it was the lag from the Lady Gaga Youtube PLUS the failing to connect https hidden link. Blanking the https one (by a gratuitous space next to the :) seems to have speeded things up to just the “Load Lady Gaga” lag time I would expect. Try it now and let me know what you think.

  17. Larry Ledwick says:

    Lag was 3 seconds on page reload.
    By George I think He’s got it!

  18. LG says:

    Trying once more …

  19. cdquarles says:

    That kind of a thing bugs me quite a bit. HTML has also changed over the years, too. When I want an embed, far too often I get a link. When I want a link, far too often I get an embed. /facepalm

  20. E.M.Smith says:

    Well, hopefully this will help you find out how to get what you want…

    Do realize that much of this is trying to work past WordPress “helping” and the behaviour may be different on other services…

Anything to say?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s