salut,
faut croire que la vidéo peut distraire ^^. Restons sérieux quand même. C'est relativement simple à faire mais il faut s'accrocher et ne pas perdre le fil.
Il faut déjà savoir que ça me paraît assez dur à réaliser sans passer par JS. Pour arriver donc au résultat que tu souhaites, l'idée est de prendre un élément qui engloberait ta vidéo, de lui faire subir une rotation puis d'appliquer une rotation inverse à la vidéo pour annuler celle de son parent. Il suffirait ensuite de masquer ce qui dépasse et le tour est joué.
---------------------------------------------------------------------------------------------------------------------------
La première problématique qui se pose est de trouver les bonnes dimensions de l'élément qui engloberait ta vidéo, de telle sorte à ce qu'il couvre toujours toute la surface de son parent (comme sur l'image 2). En sachant qu'on partira sur une rotation de 45deg de cet élément, en décomposant la figure formée (toujours dans l'image 2), on retrouvera à chaque fois des triangles isocèles rectangles qui déborderont du conteneur parent. En voyant aussi (sur l'image 2-b) que l'un des côtés du triangle (1) est la hauteur que l'on recherche et que l'un des côtés du triangle (2) additionné à l'un des côtés du triangle (1) est la largeur, on peut facilement retrouver nos dimensions.
J'ai choisi de décaler cet élément à droite de 12% de la largeur de son conteneur (right:12%), le reste qui vaut donc 88% de la largeur est l’hypoténuse du triangle (1). La hauteur du PARENT de l'élément est donc l’hypoténuse du triangle (2). Les formules qui en découlent sont alors faciles :
hauteur = racine[(0.88 * largeurParent)² / 2]
largeur = racine(hauteurParent² / 2) + hauteur
Maintenant qu'on a nos dimensions, il faut savoir bien les utiliser en procédant à la rotation à partir du bon endroit (image 2-d) ("transform-origin:100% 100%") dans le sens antihoraire (-45deg). On remonte ensuite cet élément de 100% de sa hauteur et c'est fait.
Reste l'élément enfant de ce dernier qui a aussi subit la rotation de son parent à ajuster. Il faut dans un premier temps lui faire subir une rotation inverse (+45deg) mais à partir du point d'origine 0 0 ("transform-origin:0 0"), puis le décaler à gauche d'une distance que l'on a déjà calculé (image 3-b). On lui donne ensuite une largeur de 88% pour qu'il ait les dimensions correctes auxquelles on s'attendait (image 3) et pouf ça fait des chocapics !
Le premier élément à qui on a fait subir la rotation sera en position absolue avec un z-index supérieur à ce qu'on appellera "contenu" pour qu'il puisse le recouvrir. On ajoute un "overflow:hidden" pour masquer tout ce qui dépasse et obtient ce que l'on souhaite.
Il faut ensuite ajuster à chaque redimensionnement la vidéo pour qu'elle ne laisse pas de vide et on arrive à ton résultat.
Voici grosso modo
un exemple (qui bug un peu en ligne mais il suffit de le copier) qui ne marchera cependant pas sur IE8 même s'il est possible de le faire fonctionner
(ça sera juste très long franchement chiant).
Si le lien ne se déclenche pas, il faut redimensionner la fenêtre
(c'est juste en ligne je ne sais pas pourquoi ça fait ça).
je t'en prie