Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ileana Dell'Unti
2,282 Pointsit is possible to play video with triangular form? help!
Hi! i'm working in a proyect that it's a bit experimental, but quite simple, I need to build triangles that work as divs that contains photos and those photos activates short videos. So far, I can build triangles with css using solid property, but i dosn't work when I try to use background-image property., so i'm guessing that it won't work for videos either.
how can a I build a triangular div that contains photos and videos (and reproduce it with that form????) shall I keep studing css or this is a JS's land?
thanks!!
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsI did a little research and this was all I was able to find: http://blogs.msdn.com/b/thebeebs/archive/2011/12/08/i-would-like-to-mask-a-html5-video-element-and-convert-it-into-a-triangle-i-want-a-solution-that-will-work-in-ie9-firefox-and-chrome-is-it-possible.aspx
This is from a web developer from Microsoft and he came up with a solution using css3 transforms to achieve a triangular video.
There's a jsfiddle demo showing the code and hopefully you can adapt this to your needs. It's not going to work in older browsers that don't support transforms.
You should be able to copy this technique to do the 3 smaller images as well.
It's unlikely the normal way to build css triangles is going to work for images because you can't clip a background image to a specific border.
Ileana Dell'Unti
2,282 PointsHi Jason thanks, inside the triangle it will be more small triangles (3 to be precisly) but, all the photos in the small triangles are poster from short videos. Every video needs to be play in the big triangle.
this is pretty muh all the navigation of the web site (that is a interactive experiemental documentary actually), plus some tex, and credits.
Ileana Dell'Unti
2,282 PointsThanks you so so so much !
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Ileana,
I've changed the category to css for now.
Are you saying that the video needs to play in the same triangle as the photo? In other words, the photo is a poster for the video?