Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>There is a jsfiddle of the below code <a href="http://jsfiddle.net/2svh6/1/" rel="nofollow">here</a>. (The player doesn't show up correctly, I think jsfiddle doesn't work well with the "embed method". I know it works on jsfiddle using the iframe method but you mentioned you wanted to avoid iframes).</p> <p>One big improvement, as already mentioned, is to use <a href="http://code.google.com/p/swfobject/" rel="nofollow">swfobject</a> to generate the player embed. When using this method, you must create a placeholder for the player element. The placeholder will be removed and replaced with the embed when the link is clicked. I highly recommend creating a parent div for the link and the player. In order to prevent resizing of elements when the embed is generating, you should also explicitly set the width/height of the container element.</p> <p>I think this is nice use of deferred loading. Although flash players don't block on load, they still use a lot of resources and I would appreciate a page that initially presents as a thumbnail set.</p> <p><strong>Markup</strong></p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt; &lt;/script&gt; &lt;div class="container"&gt; &lt;div id="placeholder_FzRH3iTQPrk"&gt;&lt;/div&gt; &lt;a href="#" data-video="FzRH3iTQPrk" class="youtube-video"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;div id="placeholder_go43XeW6Wg4"&gt;&lt;/div&gt; &lt;a href="#" data-video="go43XeW6Wg4" class="youtube-video"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p><strong>JavaScript</strong></p> <pre><code>$(document).ready(function() { $('a.youtube-video').each(function() { var videoId = $(this).attr('data-video'); var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; var videoBackground = $('&lt;span class="youtube-thumbnail"&gt;&lt;/span&gt;'); videoBackground.css({ background:"#fff url('"+videoThumbnail+"') no-repeat" }); // also set the parent container size to prevent flicker $(this).add($(this).parent()).css({ height:315, width:460, position:"relative", display:"block", textAlign:"center", color:"#fff", fontSize:26 }); $(this).text('Click to load video'); $(this).append(videoBackground); }); $('a.youtube-video').click(function(e) { e.preventDefault(); var videoId = $(this).attr('data-video'); var params = { allowScriptAccess: "always", allowFullScreen: "true" }; var atts = { id: 'player_'+videoId }; $(this).hide(); swfobject.embedSWF( "http://www.youtube.com/v/"+videoId+"?enablejsapi=1&amp;playerapiid=ytplayer&amp;version=3", 'placeholder_'+videoId, "460", "315", "8", null, null, params, atts); }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload