StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It's appears there is a restriction on some video which don't allow embeding video on size inferior to 200*200 (px). This restriction is not applied for all video (maybe older than last update youtube API, i don't know).</p> <p>After some tests, this restriction is applied when youtube player readystate changed to status: <code>PlayerState.PLAYING (evt.data === 1)</code> </p> <p>So as a basic workaround, you could change size of iframe 'on the fly' after the satus has been updated, see demo&code below:</p> <p><a href="http://jsfiddle.net/eDZrP/6/" rel="noreferrer">DEMO</a></p> <pre><code>var player, myWidth = "114px", myHeight = "65px"; function onYouTubePlayerAPIReady() { player = new YT.Player('testVideo', { height: myWidth, width: myHeight, videoId: '-rMTExNTx2s', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }, playerVars: { controls:0, showinfo:0 } }); } function onPlayerStateChange(evt) { if (evt.data == -1) { evt.target.a.width = "200px"; evt.target.a.height = "200px"; } else if (evt.data == 1) { evt.target.a.className = ""; evt.target.a.width = myWidth; evt.target.a.height = myHeight; done = true; } } </code></pre> <p>As you can ssee in this DEMO, i set an hidden class with css <code>.hidden{opacity:0}</code>. This is used to hide player before the video is loaded. Using <code>display:none;</code> doesn't work, its surely an other API restriction. Still in this DEMO, you have to wait until the video has started to play to see the player appears. You have now to find the best workaround which could fit your needs, using e.g a thumbnail image and moving from negative offset player to wished location when readystate has changed, hope you got the idea.</p>

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