taylahroberts1 Posted March 24, 2023 Share Posted March 24, 2023 Hey ya'll! Trying to add 10px rounded corners to my homepage video but haven't had any luck with other CSS i've found on here. Anyone know how I can do this? All my images have rounded corners so its killing me that my video doesn't. Thanks so much!!! URL: https://emmett.world/ password: hello Link to comment
Solution Mark.Hook Posted March 24, 2023 Solution Share Posted March 24, 2023 Put this in the Custom CSS section of your website and see if it does the trick... .video-player .plyr video { object-fit: cover !important; border-radius: 10px !important; } PartTwoDesign, taylahroberts1, sprintwebsites and 1 other 3 1 Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co Link to comment
taylahroberts1 Posted March 24, 2023 Author Share Posted March 24, 2023 THIS WORKED!! Thank you so much, you're a lifesaver :)))) Link to comment
Mark.Hook Posted March 24, 2023 Share Posted March 24, 2023 No problem at all. Glad I could help. Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co Link to comment
yogacid Posted July 3, 2023 Share Posted July 3, 2023 Hi, I'd like to round the corners of the first video on this page: https://www.howtousepsychedelics.com/microdosing-course Thank you for your help! Link to comment
DPruitt Posted July 3, 2023 Share Posted July 3, 2023 .video-player .plyr .plyr__controls:before {display:none!important;} .video-player .plyr video {border-radius:30px;} Here you go tuanphan 1 Link to comment
yogacid Posted July 6, 2023 Share Posted July 6, 2023 (edited) Thanks for ther reply @DPruitt but when I copy / past that code into the CSS area it doesn't change the video at all. Edited July 6, 2023 by dudecctv Link to comment
DPruitt Posted July 7, 2023 Share Posted July 7, 2023 I may need access to the site; it worked the other night when working from developer mode. derek@derekpruitt.design Link to comment
tuanphan Posted July 9, 2023 Share Posted July 9, 2023 You can use this CSS code .video-player .plyr .plyr__controls:before {display:none!important;} .plyr__video-wrapper video, .plyr__video-wrapper {border-radius:30px !important;} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
yogacid Posted July 11, 2023 Share Posted July 11, 2023 On 7/9/2023 at 1:41 AM, tuanphan said: You can use this CSS code .video-player .plyr .plyr__controls:before {display:none!important;} .plyr__video-wrapper video, .plyr__video-wrapper {border-radius:30px !important;} Thank you, but, this also rounds the corners on background videos, is there a way to make it only for imbedded videos? Link to comment
tuanphan Posted July 15, 2023 Share Posted July 15, 2023 On 7/12/2023 at 1:58 AM, dudecctv said: Thank you, but, this also rounds the corners on background videos, is there a way to make it only for imbedded videos? You mean apply to this video only? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
yogacid Posted July 19, 2023 Share Posted July 19, 2023 On 7/15/2023 at 3:01 AM, tuanphan said: You mean apply to this video only? Yes, that is what I mean. Because currently, the code is applying it to section background videos as well. Link to comment
tuanphan Posted July 21, 2023 Share Posted July 21, 2023 On 7/19/2023 at 8:30 AM, dudecctv said: Yes, that is what I mean. Because currently, the code is applying it to section background videos as well. Use this new code .fe-63eea7c825f23c0a3c9cc974 { .video-player .plyr .plyr__controls:before {display:none!important;} .plyr__video-wrapper video, .plyr__video-wrapper {border-radius:30px !important;} } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Silas_Nogueira Posted January 10 Share Posted January 10 Hey @tuanphan, following the topic: how can I round the corners of Vimeo videos? The CSS code above is not working for me : ( https://www.silasnogueira.com/work-1/frootloops Thanks! Link to comment
tuanphan Posted January 13 Share Posted January 13 On 1/11/2024 at 1:21 AM, Silas_Nogueira said: Hey @tuanphan, following the topic: how can I round the corners of Vimeo videos? The CSS code above is not working for me : ( https://www.silasnogueira.com/work-1/frootloops Thanks! Use this code .video-player .plyr .plyr__controls:before {display:none!important;} .plyr__video-wrapper video, .plyr__video-wrapper, .sqs-video-overlay {border-radius:30px !important;} Silas_Nogueira and Tucker 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Silas_Nogueira Posted January 19 Share Posted January 19 Hey, @tuanphan its me again 😅 I noticed the Background video on my index page now it has a rounded corner too, but for this one, I'd like to make it square. Is it possible to change the corners for only one video (to square)? For the other videos, I'll keep it rounded. Would you mind helping me again? www.silasnogueira.com THANK YOU! Link to comment
tuanphan Posted January 21 Share Posted January 21 On 1/19/2024 at 7:40 AM, Silas_Nogueira said: Hey, @tuanphan its me again 😅 I noticed the Background video on my index page now it has a rounded corner too, but for this one, I'd like to make it square. Is it possible to change the corners for only one video (to square)? For the other videos, I'll keep it rounded. Would you mind helping me again? www.silasnogueira.com THANK YOU! You can use this CSS under [data-section-id="635ae09c7c826e6c3f5c1a83"] .plyr__video-wrapper, [data-section-id="635ae09c7c826e6c3f5c1a83"] video { border-radius: 0 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Silas_Nogueira Posted January 23 Share Posted January 23 Amazing! Thanks again @tuanphan! Link to comment
Briana1 Posted February 8 Share Posted February 8 Hi! I am trying to do the same thing but the above code isn't doing anything. I want to make all my videos that are not background videos rounded. Can you help? Link to comment
tuanphan Posted February 11 Share Posted February 11 On 2/9/2024 at 4:15 AM, Briana1 said: Hi! I am trying to do the same thing but the above code isn't doing anything. I want to make all my videos that are not background videos rounded. Can you help? Can you share link to page where you use video? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
wearelightning Posted April 4 Share Posted April 4 Is it possible to make this apply only to videos in the body of my site, not in the header? When I have video as a background of the header it rounds the edges and doesn't look right. Will attach the screenshot to show what I mean. Link to comment
tuanphan Posted April 7 Share Posted April 7 On 4/4/2024 at 10:52 AM, wearelightning said: Is it possible to make this apply only to videos in the body of my site, not in the header? When I have video as a background of the header it rounds the edges and doesn't look right. Will attach the screenshot to show what I mean. I see some code in this thread, which exact code did you use? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JamIsJam88 Posted April 8 Share Posted April 8 On 7/9/2023 at 4:41 AM, tuanphan said: You can use this CSS code .video-player .plyr .plyr__controls:before {display:none!important;} .plyr__video-wrapper video, .plyr__video-wrapper {border-radius:30px !important;} Okay, this works great to set a border radius for the video blocks. However, there is a very brief moment when the page loads that the borders are straight before changing. How to set the border radius for the first frame of the video? I do not have a custom image for the video block. Link to comment
tuanphan Posted April 11 Share Posted April 11 On 4/9/2024 at 12:06 AM, JamIsJam88 said: Okay, this works great to set a border radius for the video blocks. However, there is a very brief moment when the page loads that the borders are straight before changing. How to set the border radius for the first frame of the video? I do not have a custom image for the video block. Can you share link to page where you use video? I will check it again Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment