MillyBanks Posted March 21, 2022 Share Posted March 21, 2022 Site URL: https://sunflower-eagle-a3h3.squarespace.com/ I am hoping to be able to display a video like this a bit like the collage image display. Ideally I want to avoid doing this via custom CSS where I arrange each block and need them to be joined together. Does anyone know if it possible to do this? Link to comment
tuanphan Posted March 22, 2022 Share Posted March 22, 2022 Your site is private. Can you setup password & share url again? We can help easier Also, you can also consider using Gif Image. MillyBanks 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
MillyBanks Posted March 22, 2022 Author Share Posted March 22, 2022 (edited) Hi @tuanphan - sorry yes the password is Hornbeam I did wonder about a gif image but ideally I want a video to play here - open to suggestions of other ways to display! Edited March 22, 2022 by MillyBanks Link to comment
tuanphan Posted March 24, 2022 Share Posted March 24, 2022 On 3/22/2022 at 7:46 PM, MillyBanks said: Hi @tuanphan - sorry yes the password is Hornbeam I did wonder about a gif image but ideally I want a video to play here - open to suggestions of other ways to display! My idea is to add a Video Block under Image, then we will use JavaScript code to replace image with video. Not sure If this will work or not. If you can add a video, we will try testing the code MillyBanks 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
MillyBanks Posted March 24, 2022 Author Share Posted March 24, 2022 Hi @tuanphan good idea. I have added the video below (ideally would like it to show without youtube branding etc) Other suggestion i've had is to code the two items together in a code block but I am unsure if it will give the desired effect. Link to comment
tuanphan Posted March 26, 2022 Share Posted March 26, 2022 On 3/25/2022 at 6:26 AM, MillyBanks said: Hi @tuanphan good idea. I have added the video below (ideally would like it to show without youtube branding etc) Other suggestion i've had is to code the two items together in a code block but I am unsure if it will give the desired effect. Try adding to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('div#block-yui_3_17_2_1_1648160496953_4583').appendTo('div#block-yui_3_17_2_1_1647883412534_8641 .content-fit'); }); </script> <style> div#block-yui_3_17_2_1_1647883412534_8641 img { display: none; } </style> MillyBanks 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
MillyBanks Posted March 26, 2022 Author Share Posted March 26, 2022 It seems to have worked design wise but it won't play. Is it worth trying the video uploaded differently? I was considering uploading directly to the website ideally. Perhaps something like this would work? Thanks so much for your help on this @tuanphan! Link to comment
MillyBanks Posted March 28, 2022 Author Share Posted March 28, 2022 Any other ideas @tuanphan? 🙂 Link to comment
tuanphan Posted March 30, 2022 Share Posted March 30, 2022 On 3/28/2022 at 8:17 AM, MillyBanks said: Any other ideas @tuanphan? 🙂 It looks like you changed page layout. I don't see image block now https://sunflower-eagle-a3h3.squarespace.com/ MillyBanks 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
MillyBanks Posted March 30, 2022 Author Share Posted March 30, 2022 (edited) 30 minutes ago, tuanphan said: It looks like you changed page layout. I don't see image block now https://sunflower-eagle-a3h3.squarespace.com/ I have yes I found another work around by using a code block. I am just customising now. Do you know how to get the text with the background to appear behind the video? I then need to sort for tablet and mobile view. For mobile I will hide but I would like to have the same display on tablet. Code below - in code block: <video style="width: 100%" playsinline controls controlsList="nodownload" src="https://sunflower-eagle-a3h3.squarespace.com/s/Hornbeam-Wellbeing-And-Training-V-1-Master-Export-Converted_4.mp4"> <source type="video/mp4" src="https://sunflower-eagle-a3h3.squarespace.com/s/Hornbeam-Wellbeing-And-Training-V-1-Master-Export-Converted_4.mp4"> <body oncontextmenu="return false;"> </video> <div class="grey"> <b>At Hornbeam Workplace Wellbeing, we’ve seen the enormous costs to businesses when employee wellbeing isn’t supported properly in the workplace. <br> <br> We’ve also seen the destructive fallout for individuals, their families, and communities.</b> </div> <style> .grey { background: #2e4f69; padding: 50px; text-align: center; color: #ffffff !important; } </style> in CSS : div .grey { position: relative; bottom: 300px; width:35%; right: 250px; color: white; font-size: 15px; line-height:1.5; padding-left: 40px; padding-right: 60px; padding-top: 25px; padding-bottom:25px; } #block-yui_3_17_2_1_1648551184325_14043 { max-width:680px; position: relative; left:6%; right:6%;} Edited March 30, 2022 by MillyBanks Link to comment
tuanphan Posted April 1, 2022 Share Posted April 1, 2022 On 3/30/2022 at 8:57 AM, MillyBanks said: I have yes I found another work around by using a code block. I am just customising now. Do you know how to get the text with the background to appear behind the video? I then need to sort for tablet and mobile view. For mobile I will hide but I would like to have the same display on tablet. Code below - in code block: <video style="width: 100%" playsinline controls controlsList="nodownload" src="https://sunflower-eagle-a3h3.squarespace.com/s/Hornbeam-Wellbeing-And-Training-V-1-Master-Export-Converted_4.mp4"> <source type="video/mp4" src="https://sunflower-eagle-a3h3.squarespace.com/s/Hornbeam-Wellbeing-And-Training-V-1-Master-Export-Converted_4.mp4"> <body oncontextmenu="return false;"> </video> <div class="grey"> <b>At Hornbeam Workplace Wellbeing, we’ve seen the enormous costs to businesses when employee wellbeing isn’t supported properly in the workplace. <br> <br> We’ve also seen the destructive fallout for individuals, their families, and communities.</b> </div> <style> .grey { background: #2e4f69; padding: 50px; text-align: center; color: #ffffff !important; } </style> in CSS : div .grey { position: relative; bottom: 300px; width:35%; right: 250px; color: white; font-size: 15px; line-height:1.5; padding-left: 40px; padding-right: 60px; padding-top: 25px; padding-bottom:25px; } #block-yui_3_17_2_1_1648551184325_14043 { max-width:680px; position: relative; left:6%; right:6%;} Can you share link to page in screenshto? We can check easier 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
MillyBanks Posted April 3, 2022 Author Share Posted April 3, 2022 Hi @tuanphan I did link on the other chain about the padding underneath the video but here is the link! https://sunflower-eagle-a3h3.squarespace.com/home 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