JSFiddle - React, Tailwind, and code Playground

by xmajox

HTML

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

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


<!--  
Yahoo Screen Video Embed Code also provided and has nothing to do with the jQuery or JavaScript in use, and is shown for reference with autoplay default on. Commerical is normally included.

The source was obtained by clicking the 'i' when the video plays (not seen during a commercial, but when the desired video plays). Also, I don't have access to newer Yahoo Screen Player API to turn off autoplay since having multiple videos on a page would start them all at the same time.

Since the following iframe src URL (which includes the ?format-embed) is an actual webpage, you can plug that address into the browsers address bar and view the source HTML code of that page, which is very differnet from the regular video page.

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 ( in = India): http://in.screen.yahoo.com/frozen-lake-opens-jumper-163000076.html
-->

<!--
The Yahoo Screen Embed Video is disabled since it automatically displays a whole lot of console log messages and some with errors, so is best to understand this jsFiddle and it's console log messeages first. Enable below once your ready.
-->

<!--
<br /><br /><br />

Yahoo! Screen Video Embed Code provided by the "i" buton on the video player.
<iframe width="624" height="351" scrolling="no" frameborder="0" src="http://in.screen.yahoo.com/frozen-lake-opens-jumper-163000076.html?format=embed"></iframe>
-->

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.



(function($) {

    $(document).ready(function() {


        // The original script used an interactive input field with button and simple format checking.
        // This jsFiddle just calls up the function "getLinkMeta" with Yahoo Screen Video URL at the bottom of this script.
        // Ideally, you will use some type of automatic process since more than 1 video will be processed.

        
        /**
         * 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
            // create the yql query (encoded!) with the url provided
            var q = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + url + '" and xpath="//title|//head/meta"') + '&format=json&callback=?';

            // jsFiddle MOD. First console log is added in.
            console.log('ESCAPED URL that is used during the jQuery .get() process via getMetaLink function shown on the next line.');
            console.info(q);

            $.ajax({
                type: 'GET',
                url: q,
               ...