(AH) video implementation

[ah-bas-und-aer]

Solution: Video will be embeded into our own server space and with the “video element“ on top of the main page
-> B&A: decesion how to style the image on top of the page
-> Guide: Edits CSS

Question: No adding of cookie window or further data privacy is needed, correct?

[ah-bas-und-aer]

@GuidaGG The video will probably be set as on the dev-page, the thing I would like you to do is to reduce the top hight.
It says 10rem, please change it to 7, just below the gradiant.

How much would it cost to set the video as a full screnn landing area? And the header gradiant full width or – even better – appear after scrolling down the video and then stay on top?

[ah-bas-und-aer]

[ah-bas-und-aer]

[GuidaGG]

Dear Astrid,

can you check if the example I did is what you expect?

• the video takes always the height accordingly to the screen size; in some cases so that the video fits in height and the subtitles are showned, the width is slightly smaller than the screen
• I think the autoplay will not always work, depends on browser and security. Maybe we could have a default play button in case?

https://dev.vielfaeltig-bremen.de/

to implement this properly I need between 2-3 hours.

[ah-bas-und-aer]

Hey Guida Thank you for testing! Cool, thank you for the preview. If they go for this option: - Can we also fit the video to the width? I think this makes more sense and also I don’t like the white edges. Autoplay – definitivley we can add a button. - Can the video also only appears on the main page? Best Astrid

…

Am 22.10.2024 um 14:11 schrieb Guida Ribeiro ***@***.***>: Dear Astrid, can you check if the example I did is what you expect? the video takes always the height accordingly to the screen size; in some cases so that the video fits in height and the subtitles are showned, the width is slightly smaller than the screen I think the autoplay will not always work, depends on browser and security. Maybe we could have a default play button in case? https://dev.vielfaeltig-bremen.de/ to implement this properly I need between 2-3 hours. — Reply to this email directly, view it on GitHub <#60 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5UY52RE3WLIUZQP3H7PRNDZ4Y6G7AVCNFSM6AAAAABQDDL65KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMRZGEYTCMJUGQ>. You are receiving this because you authored the thread.

[GuidaGG]

• the thing is, because the video has a specific format, if i put it 100% of the width, the height will be a lot of times bigger than the height of the screne, which means the subtitles/bottom part of the video is cut. It is a decision you have to make, either priority of the height or of the width,
• yes, the idea is to have it just on homepage, but i didnt implemented it.
• can you make the button play like the arrow buttons we use?

[ah-bas-und-aer]

I see, this was not a problem for me, because on my screen it fits perfectly. The only thing i can imagine having a full width would be to use a mask and crop not the bottom of the video but the top, in case the screen does not have the hight.
Dies this makes sense?

[GuidaGG]

I will try some options when we implement it.

[ah-bas-und-aer]

Clever woman because we go for the other option :)
The easier on. For this, I would like you to reduce the spacing above the video as I mentioned in the second commment here. Also I will create an icon for “Play“

[ah-bas-und-aer]

[ah-bas-und-aer]

here are the icons of you desire

[GuidaGG]

@ah-bas-und-aer can you check the implementation?
space and buttons are on.

[ah-bas-und-aer]

@GuidaGG I uploaded the mp4 video file, can we use this as suggested in case the webm is not working?

[GuidaGG]

Hi Astrid,

Can you please test if the video is now working?
so the implmentation of the sources and the buttons are not default from the video-block, so I will post here the code that you need to use whenever you would like to use a video. We still need to confirm this is working but I will already leave here the code, because at least for the buttons it is necessary

<!-- wp:video {"id":414} -->
<figure class="wp-block-video"><video autoplay controls muted>
<source src="https://dev.vielfaeltig-bremen.de/wp-content/uploads/2024/10/CND-1135_vielfaeltig_Imagespot_Master_4K_webM.webm">
<source src="https://dev.vielfaeltig-bremen.de/wp-content/uploads/2024/10/CND-1135_vielfaeltig_Imagespot_Master_4K_med_Q_UT.mp4">
</video>

<!-- wp:buttons -->
<div class="wp-block-buttons video-buttons"><!-- wp:button {"className":"play-button"} -->
<div class="wp-block-button play-button"><a class="wp-block-button__link wp-element-button"><img class="wp-image-499"  src="https://dev.vielfaeltig-bremen.de/wp-content/uploads/2024/10/379857208-e267321d-c9b7-44d6-a51c-ea62d09baead.svg" alt="Zum Abspielen klicken"></a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"pause-button"} -->
<div class="wp-block-button pause-button"><a class="wp-block-button__link wp-element-button"><img class="wp-image-498" src="https://dev.vielfaeltig-bremen.de/wp-content/uploads/2024/10/379857205-aa1d2e9c-b9f3-4d09-885c-f680e957815c.svg" alt="Pause Button"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
</figure>
<!-- /wp:video -->

You can have the code view of the page by going to: