JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Answer by Arttronics for SO Question: http://stackoverflow.com/q/13629547/1195891

Important information for Yahoo! Screen Video data scraping:
When using URL in the main getLinkMeta(); function, note if regional subdomain (e.g., URL includes  .in.  .es.  ) is part of that URL because it might not work if your not in that region. See comments in script section for in-depth subdomain information.

This jsFiddle DEMO only uses a single div in the body section as shown below. What follows is extra non-related but useful Yahoo Screen Video Embed Example.

-->

<div id="results"></div>


<!--  

Yahoo Screen Video Embed Code Example

This section does not use any JavaScript, jQuery, etc and is simple embed example only.

Note if enabled, autoplay/autostart/autorun or whatever the API calls it, is ON by default. Commerical AD is normally included.

The source was obtained by clicking the 'i' icon when the video plays (not seen during a commercial, but when the desired video plays).

This new Yahoo! Screen Player API lacks information on the Yahoo! Developer website, and maybe in the future, API commands will be provided (unless I do not know the API website for Screen Player).

Caution: Since there is no way to disable autoplay, having multiple videos on a page would start them ALL at the same time.

Because the following iframe src URL is regular video page URL plus additional  ?format-embed  at the end, you can plug this embed URL into the browsers address bar and view the source HTML code of that embed page (it's very differnet from regular video page source).

Useful links:
Yahoo Query Language (YQL):   http://developer.yahoo.com/yql/
YQL data scraping tutorial:   http://ninjagirl.com/posts/2012/02/create-facebook-style-link-preview-using-jquery-yql
Yahoo Screen Video used:      http://screen.yahoo.com/frozen-lake-opens-jumper-163000076.html
-->

<!--
Important:
The Yahoo Screen Embed Video Example below is disabled in this jsFiddle since it automatically...

JavaScript

/**
 * Create a Facebook-style Link Preview
 * Using YQL for cross domain data scraping
 *
 * http://ninjagirl.com/posts/2012/02/create-facebook-style-link-preview-using-jquery-yql
 * @author Jocelyn (@jsfwd / ninjagirl.com)
 */

//  WARNING: This original script is modifed for SO Answer. The above link provides tutorial and unaltered source.
//           There are a lot of console log messeages to help understand what's going on... turn on the browsers console.
//           The modified sections I've done include the word "jsFiddle MOD" when something differs from the original script.
//           Comments that do not have "jsFiddle MOD" are authors original script comments.
//           For first time use, it's best NOT to enable the unrelated iframe embed example in body section since that has lots of console messages.



(function($) {

    $(document).ready(function() {


        // jsFiddle MOD:
        // The original script used an interactive input box with button and simple format checking, along with supporting HTML in body section.
        // This jsFiddle will instead invoke the "getLinkMeta()" function directly and will include a supplied Yahoo Screen Video URL.
        // Ideally, you will use some type of automatic process since it's likely you will process more than 1 datascrape video per webpage.
        // The invoke process for getLinkMeta(); is done towards the end of this script.

        
        /**
         * Using a supplied url, fetch the title, description and image to display
         * as a preview
         *
         * @param url        assume this is a valid url
         */

        function getLinkMeta(url) {
            // SELECT * FROM html WHERE url="http://mashable.com/2012/01/25/get-old-facebook-back" and xpath="//title|//head/meta"
            // can't use xpath to select meta 'property' attributes (ex./ og:image)
            // YQL's html data table run through HTML Tidy which strips as it thinks invalid
            //...