Blog Comments

  1. molendijk's Avatar
    I found a way to not only apply javascript to the videos loaded in an existing (HTML) iframe, but also to their different states. If we want to run code depending on the player's state, we must do
    Code:
    onload="some_player=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === some_state){some_function()}}}})"
    See this for all the details.
  2. molendijk's Avatar
    Here are two examples:
    Code:
    <head>
    <script src="http://www.youtube.com/player_api"></script> 
    </head>
    
    <body>
    <div style="position: relative; width: 319px">
    <div style="position: relative; text-align: center">
    <button style="cursor: pointer" onclick="player1.loadVideoById('bKZbvluHcNo')">(re)start</button>
    <button style="cursor: pointer" onclick="player1.playVideo()">play</button>
    <button style="cursor: pointer" onclick="player1.pauseVideo()">pause</button><br>
    <button style="cursor: pointer" onclick="player1.seekTo(player1.getDuration())">stop</button>
    <button style="cursor: pointer" onclick="player1.unMute()">sound on</button>
    <button style="cursor: pointer" onclick="player1.mute()">sound off</button>
    </div>
    <iframe style="position: relative; width: 319px; height: 280px;  border: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&amp;enablejsapi=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=1&amp;autohide=0&amp;vq=large" frameborder="0" allowfullscreen onload="player1=new YT.Player(this)"></iframe>
    </div>
    
    <div style="position: relative; width: 319px">
    <div style="position: relative; text-align: center">
    <button style="cursor: pointer" onclick="player2.loadVideoById('OsLap6ZNNQo')">(re)start</button>
    <button style="cursor: pointer" onclick="player2.playVideo()">play</button>
    <button style="cursor: pointer" onclick="player2.pauseVideo()">pause</button><br>
    <button style="cursor: pointer" onclick="player2.seekTo(player2.getDuration())">stop</button>
    <button style="cursor: pointer" onclick="player2.unMute()">sound on</button>
    <button style="cursor: pointer" onclick="player2.mute()">sound off</button>
    </div>
    <iframe style="position: relative; width: 319px; height: 280px;  border: 1px solid black; " src="http://www.youtube.com/embed/OsLap6ZNNQo?html5=1&amp;enablejsapi=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=1&amp;autohide=0&amp;vq=large" frameborder="0" allowfullscreen onload="player2=new YT.Player(this)"></iframe>
    </div>
    </body>
  3. molendijk's Avatar
    Also try http://fiddle.tinymce.com to customize the editor's toolbar. It works very well. Here's an example.
  4. molendijk's Avatar
    I revised the script so as to make it possible to not only load files into divs on page load but also on click, using one and the same script.
  5. molendijk's Avatar
    I was not happy with the fact that the old script didn't allow us to write html (into the alerts) in the normal way. So I revised it. I also added the possibility to dynamically size the window.
    You can find the new script plus demos and explanations here.
  6. molendijk's Avatar
    I've once more revised the script. (Hope this is the last revision). The cleantube URLS/links are shorter now, and they contain an optional parameter for info on each cleantube video.
    We can now do things like:
    http://mesdomaines.nu/cleantube?v=ROVy9PC8_8A
    http://mesdomaines.nu/cleantube?v=ROVy9PC8_8A?start=20&info=Very good Chopin playing
    http://mesdomaines.nu/cleantube?v=ROVy9PC8_8A?start=20&end=50&playlist=4pyqLbi2wLU,mUVCGsWhwHU&info=This is a nice playlist
    etc.

    Click on http://mesdomaines.nu/cleantube/cleantube_expl.html for more info.
  7. molendijk's Avatar
    I made the whole thing a bit more elegant. You can now use URLs / strings like http://www.mesdomaines.nu/cleantube?...ide=0&vq=large to show YouTube without the distractions.
    For the details, go to http://www.mesdomaines.nu/cleantube and click on 'about this page'.

    EDIT: THIS IS NOW DEPRECATED. SEE COMMENT BELOW.
    Updated 04-06-2014 at 06:50 PM by molendijk (Script revision)
  8. molendijk's Avatar
    http://s.ytimg.com/yts/swfbin/player-vfle5oFqK/watch_as3.swf?eurl=http://safeshare.tv&video_id=YOUTUBE-VIDEO-ID doesn't work anymore. You have to use this now:
    http://s.ytimg.com/yts/swfbin/player-vflyJCJXc/watch_as3.swf?eurl=http://safeshare.tv&video_id=YOUTUBE-VIDEO-ID.
  9. Beverleyh's Avatar
    Oh no, sorry, I thought you meant the Fast Edit site. I haven't got around to 'responsifying' the FoF site yet.
  10. molendijk's Avatar
    Quote Originally Posted by Beverleyh
    I made a few changes to the original CSS so maybe when you viewed it the first time, the stuff that gave horizontal scrollbars was present from the cached CSS. I think that on the second view, the revised CSS loaded in and corrected it
    Are we both referring to http://fofwebdesign.co.uk/?
  11. Beverleyh's Avatar
    I made a few changes to the original CSS so maybe when you viewed it the first time, the stuff that gave horizontal scrollbars was present from the cached CSS. I think that on the second view, the revised CSS loaded in and corrected it

    Your script is weeny! I cant believe just a few short lines has such a drastic effect - that's very handy. Its a pretty neat solution.

    I want to work more with responsive design too, but I think I should try to work on the basis of "mobile first" - I did the Fast Edit website the wrong way round (by making a 'full version' and then scaling down), which has put a bit more CSS in play than really there needs to be. Plus its a hybrid of both responsive and adaptive approaches since it uses scalable % and em measurements within the boundaries of media query breakpoints. It was fun though.
  12. molendijk's Avatar
    Quote Originally Posted by Beverleyh
    Its funny you posted this when you did Arie - I just was just working on making my Fast Edit website responsive/adaptive and it was very useful to see all the screen widths alongside each other using the Matt Kersley tool: http://fast-edit.co.uk/rwd/Thanks for sharing
    A funny coincidence indeed. Btw, I put your own website to the test using http://fast-edit.co.uk/rwd/. Result: horizontal scroll bars. But http://fast-edit.co.uk/rwd itself is perfect.
    EDIT: Beverleyh, I'm getting interested in tnis responsive/liquid thing, see this.
    Updated 09-30-2013 at 09:22 PM by molendijk
  13. Beverleyh's Avatar
    Well those are certainly much easier than playing "draggy" with the browser window

    Just to help out those who might not see where to get to the responsive view in Firefox;

    - press ALT (in Windows) to display the menu bar if you don't already have it
    - Tools >> Developer >> Resonsive Design View

    OR, press CTRL+Shift+M

    Its funny you posted this when you did Arie - I just was just working on making my Fast Edit website responsive/adaptive and it was very useful to see all the screen widths alongside each other using the Matt Kersley tool: http://fast-edit.co.uk/rwd/

    Thanks for sharing
    Updated 09-30-2013 at 07:16 PM by Beverleyh
  14. molendijk's Avatar
    Talking about Responsive Web Design:
    you can test your site here.
  15. molendijk's Avatar
    Hi Coothead,
    Thanks for your comment.
    I must say I don't care much about users who have javascript disabled. And for valid reasons.
    Less than 2% of users have javascript turned off, some say it's less tha 0.5%.
    Can we use jquery without javascript enabled? No
    How about e-banking with javascript disabled? Not possible.
    Have you tried DynamicDrive with javascript disabled? Disaster.
    It's not without reason that Firefox 23 has removed the option to disable JavaScript from the Options pane and if you had JavaScript turned off, it has been turned back on.
    It's not without reason that Chrome tells you that turning off javascript is not recommended (when you change settings).
    ETC.
    So if you want my site to appear, don't disable javascript (you can't drive a car without an engine, can you?).
    Updated 09-05-2013 at 12:07 AM by molendijk
  16. coothead's Avatar
    Hi there molendijk,

    Have you considered those users who may have javascript disabled?

    Your site does not produce a white flash (flicker) when the user navigates.

    Unfortunately, the user is unable to navigate, as the site does not appear at all.


    coothead
  17. traq's Avatar
    Quote Originally Posted by molendijk
    if the dialog could be used to trigger some code that 'overrides' the browser's normal behavior i.e. that tells Safari, in this particular case, to abandon its normal behavior ... But creating such code seems impossible, for reasos of security.[sic]
    I hadn't checked if it was possible or not. I'd imagined it would be, but... ah well. c'est la vie.
  18. molendijk's Avatar
    Hello traq, thanks for the response.
    The general idea is that, as soon as we (as developers) know that a browser will refuse to perform a 'legal' action (such as opening a popup or a new tab after a click on a link), we write if (typeof(some_action)=='undefined'){alert("bla")}, where bla is the info needed by the user to make things (some_action) work 'as they should'.
    In our case, using a dialog box rather than an alert would only be an improvement if the dialog could be used to trigger some code that 'overrides' the browser's normal behavior i.e. that tells Safari, in this particular case, to abandon its normal behavior in favor of opening a popup or a new tab. But creating such code seems impossible, for reasos of security.
    I should add that there's no real need to anticipate on what the browser may do or refuse, since for every event we want to be accomplished we can add if (typeof(some_action)=='undefined'){alert("bla")} to our code. Most of the time, this line will be redundant (= no alert, because the action will not be classified as 'undefined' by the browser), but it never hurts.
    Arie.
  19. traq's Avatar
    Quote Originally Posted by molendijk
    Sometimes, browsers / popup blockers make mistakes and block windows or tabs although they are explicitly requested by the user.
    I think the underlying problem is that it's impossible for the browser to tell what the user's intention really was. Browsers are forced to speculate on the basis of known behaviors (both legitimate uses and scams/dishonest uses).

    -------------------

    I wonder if you could use a confirmation dialog instead of an alert, and simply ask if the user wants to open the popup...? That ought to be considered an "explicit request," right? And it would avoid the need to fiddle with settings and reload the page.
  20. molendijk's Avatar
    HERE's an elaborated version of some parts of this thread.
    Arie.
Page 1 of 3 123 LastLast