Flip video on the X-axis & Y-axis

[Drachlox]

Addon allready has feature to rotate video, but some video on youtube is flipped on the X-axis to avoid copyright strikes. It would therefore be great to have the option to flip it back.

[Bagus23]

+1 for this, add mirroring and advanced playback speed feature like MirrorTube is really helpful for dancers too.

[TomasDmArg]

Hi!, you can use this:

---

      //creates a button at the top of the video description, pressing it activates the "rotar" function
    document.getElementById("description").insertAdjacentHTML("beforebegin", "<button onclick='rotar();' style='width: 
    40mm; height: 10mm; background-color: #c00; border: none; color: #fff'><b>Rotate</b></button>")

     //creates a variable called vidplayer that stores all the styles of an element 
    let vidplayer = document.querySelector("video");

     //then, creates another variable called rotstate that allows me to know the status of the rotation, 0 if it is normal, 1 if it is 
     rotated.
    let rotstate = 0;

    //creates the function called "rotar" which I called on the button
   function rotar() {

  //i check the value of rotstate, if the video doesn't rotate, I rotate it. and if it already is, I return it to its original state
 if (rotstate == 0 ){

   //rotates the video
vidplayer.style["transform"] = "rotateY(180deg)"; 
    vidplayer.style["-webkit-transform"] = "rotateY(180deg)"; 
    vidplayer.style["-moz-transform"] = "rotateY(180deg)";

   //rotstate increases its value to 1
    rotstate++;
   }else if (rotstate == 1){

     //rotates the video
vidplayer.style["transform"] = "rotateY(0deg)"; 
    vidplayer.style["-webkit-transform"] = "rotateY(0deg)"; 
    vidplayer.style["-moz-transform"] = "rotateY(0deg)";

    //reduce rotstate
    rotstate--;
}

}

[TomasDmArg]

and if you want to rotate it on the X axis:

 //creates a button at the top of the video description, pressing it activates the "rotar" function
document.getElementById("description").insertAdjacentHTML("beforebegin", "<button onclick='rotar();' style='width: 
40mm; height: 10mm; background-color: #c00; border: none; color: #fff'><b>Rotate</b></button>")

 //creates a variable called vidplayer that stores all the styles of an element 
let vidplayer = document.querySelector("video");

 //then, creates another variable called rotstate that allows me to know the status of the rotation, 0 if it is normal, 1 if it is 
 rotated.
let rotstate = 0;

//creates the function called "rotar" which I called on the button
 function rotar() {

//i check the value of rotstate, if the video doesn't rotate, I rotate it. and if it already is, I return it to its original state
if (rotstate == 0 ){

//rotates the video
vidplayer.style["transform"] = "rotateX(180deg)"; 
vidplayer.style["-webkit-transform"] = "rotateX(180deg)"; 
vidplayer.style["-moz-transform"] = "rotateX(180deg)";

//rotstate increases its value to 1
rotstate++;
}else if (rotstate == 1){

 //rotates the video
 vidplayer.style["transform"] = "rotateX(0deg)"; 
vidplayer.style["-webkit-transform"] = "rotateX(0deg)"; 
vidplayer.style["-moz-transform"] = "rotateX(0deg)";

//reduce rotstate
rotstate--;
}

}

[mrangjunboon2017s]

how u do it.

[ImprovedTube]

#1445