2

Some sites are using the loop attribute with video

<video loop="loop"></video>

Example

I do not like this. I would prefer the video to play once, then give me the option to repeat like YouTube. I am currently using Firefox and I have the Stylish add-on, but I am not sure if the loop can be disabled purely with CSS.

If this cannot be done with CSS/Stylish, can it be done with another add-on?

4
+50

Firefox

  1. Install Scriptish (I couldn't get it to work with Greasemonkey for some reason)
  2. Restart Firefox
  3. Install this userscript by clicking on this link
  4. Reload Imgur.com

Google Chrome

  1. Install Custom JavaScript for websites or a similar addon
  2. Visit imgur.com or whichever website you wish to disable video looping for
  3. Click on the blue button in the toolbar that says cjs and add the following JS code:
    document.getElementsByTagName("video")[0].removeAttribute("loop");
  4. Save the script and reload Imgur.com

To toggle looping using a keyboard shortcut, use this:

// ==UserScript==
// @id imgur.com@scriptish
// @name prevent-gif-looping
// @version 1.1
// @namespace imgur.com
// @author Vinayak
// @description Block GIFs from looping on Imgur
// @include http*://imgur.com/*
// @run-at document-end
// ==/UserScript==
function stopLooping(){
    document.getElementsByTagName("video")[0].removeAttribute("loop");
    loop=false;
}

function startLooping(){
    document.getElementsByTagName("video")[0].setAttribute("loop", "loop");
    document.getElementsByTagName("video")[0].load();
    loop=true;
}

function doc_keyUp(e) {
    // B = key code 66. Press B to toggle looping
    if (e.keyCode == 66) {
        if(loop) { stopLooping(); } else { startLooping(); }
    }
}

document.addEventListener('keyup', doc_keyUp, false);
document.getElementsByTagName("video")[0].removeAttribute("loop");
var loop=false;

The default keyboard shortcut is B. Press that to toggle video looping. To use this script with Google Chrome, copy the code and paste it into the extension as instructed above.

To use it with Firefox, use this link to install the userscript in the steps mentioned above.


Notes: I'm not sure this can be achieved just by using CSS. Maybe it's possible by some creative use of the content property?

Userscript sourcecode:

// ==UserScript==
// @id imgur.com@scriptish
// @name prevent-gif-looping
// @version 1.0
// @namespace imgur.com
// @author Vinayak
// @description Block GIFs from looping on Imgur
// @include http*://imgur.com/*
// @run-at document-end
// ==/UserScript==
document.getElementsByTagName("video")[0].removeAttribute("loop"); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.