PartTwoDesign Posted January 22 Share Posted January 22 Hi, I am wondering if there is a way to have my video fill the full size of the frame (the same way an images does)? I am currently using this code: #block-yui_3_17_2_1_1705927316935_8707.video-block .video-player{ padding-bottom:61% } But it isn't very precise, no matter what I change the percentage to. This is for a portfolio page and we need all the images to align. I have attached screenshots to show this. Is there custom code to allow a video block to act like an image block and fill the frame, cropping off anything that falls outside of the frame so that it can be responsive (exactly like the image blocks do)? Any help or suggestions would be greatly appreciated. Thanks, Chris https://bugle-dory-srgh.squarespace.com/ni-opera Pass: parttwo Link to comment
Solution jpeter Posted January 23 Solution Share Posted January 23 @PartTwoDesign You can use the following CSS that adds height of 100% to some of the containers and then overrides the object-fit property from contain to cover #block-yui_3_17_2_1_1705927316935_8707.video-block > .sqs-block-content, #block-yui_3_17_2_1_1705927316935_8707.video-block .intrinsic, #block-yui_3_17_2_1_1705927316935_8707.video-block .embed-block-wrapper, #block-yui_3_17_2_1_1705927316935_8707.video-block .sqs-native-video { height: 100%; } #block-yui_3_17_2_1_1705927316935_8707.video-block .video-player { padding: 0; } #block-yui_3_17_2_1_1705927316935_8707.video-block video { object-fit: cover; } Working example: tUYEFEvAnU.mp4 HeleneCotton, moonlitdesign, biaalvarez and 1 other 2 1 1 Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
PartTwoDesign Posted January 23 Author Share Posted January 23 @jpeter That works perfectly! Thank you so much! Can I add this to multiple videos on one page if I change the #block number? I tried it on a couple more videos and they are only showing a small slit of the video. Is it possible to fix this? Thank you so much for all your help so far! Chris Link to comment
jpeter Posted January 23 Share Posted January 23 @PartTwoDesign It looks like you may have been trying to divide the sections using, -----------------------, but the appears to be breaking the CSS. If you want to divide the section of CSS, use a CSS comment insead by adding an opening /* and closing */ like so: /* ---------------------- */ Here's a video deleting the divider using Chrome dev tools and that fixes the issue: Z0JBfc7ADh.mp4 PartTwoDesign 1 Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
PartTwoDesign Posted January 23 Author Share Posted January 23 @jpeter Ahhh, yes I was trying to divide the sections so I could tell them apart. Thank you so much! It's working perfectly now. You have been an amazing help!! Thanks again, Chris Link to comment
cscholz Posted April 26 Share Posted April 26 @jpeter Hi, I tried the same code you provided above and replaced the block id to mine, but it didnt work. Possible to help me out here? https://www.chrisscholzdesign.com/home/girl-skateboards-x-active pw; CSDesign123 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