@melvin_codesmith
Learner.
Nothing here yet.
Nothing here yet.
No blogs yet.
Not sure if there's any way to not transition something but one way to do this is by applying a different transition duration to the property you wish to not animate. That'd look something like this in your case: transition : all 300ms ease, background-color 1ms; One thing to note here is that the transition duration mentioned for background-color is 1ms instead of 0 and that is because some browsers do not accept 0 as an acceptable parameter for duration. in our case though, while transition duration is of 1ms and not 0 but it does the trick :)
You cannot apply styles directly to the video player. However, what you can do is, switch off the default player controls by not writing the controls attribute into your <video> tag. Here is how that would look like: < video width = "320" height = "240" > < source src = "video.mp4" type = "video/mp4" > </ video > You can now define your own controls with your markup and styles. The <video> has to be put inside a <figure> tag where you can put in the markup for your control set which would look something like this: < figure id = "videoContainer" > < video id = "video" poster = "img/poster.jpg" > < source src = "video.mp4" type = "video/mp4" > </ video > < ul id = "video-controls" class = "controls" > < li > < button id = "playpause" type = "button" > Play/Pause </ button > </ li > < li > < button id = "stop" type = "button" > Stop </ button > </ li > < li class = "progress" > < progress id = "progress" value = "0" min = "0" > < span id = "progress-bar" > </ span > </ progress > </ li > < li > < button id = "mute" type = "button" > Mute/Unmute </ button > </ li > < li > < button id = "volinc" type = "button" > Vol+ </ button > </ li > < li > < button id = "voldec" type = "button" > Vol- </ button > </ li > < li > < button id = "fs" type = "button" > Fullscreen </ button > </ li > </ ul > </ figure > Now you can put in your own styles to the control set and wire in the different controls using the Media API for html5 video. You can read more about the whole method and the javascript part in this article: developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player Hope it helps! 😊
I do it the same way, Developing for desktops and then going down for mobiles. In my opinion, going mobile first can make your development process desktop second Don't get me wrong here, I do believe that mobile first approach is great and solves a lot of problems and the response by @xirclebox is also pretty accurate here but I also believe that desktop web has a lot of potential and by focusing more on mobiles, when we "expand" our design, we tend to ignore that potential. This said, I think would still say that mobile first is pretty great if you have the right content and design for it. But if the content demands it, go desktop first!
I'm dividing my styles into different files following this guide by @Robert (https://hashnode.com/post/what-is-the-best-way-to-organize-your-css-ciibz8fkw01d8j3xtpmlyd4hs) and would move my code to SASS or LESS(still deciding on it) I'd maybe start a poll for that :))