Ir al contenido
Menú
Se marcó esta pregunta

I want to post a video, filmed by a phone camera in the vertical/upright position on my Odoo website. However if I upload it the standard way to youtube and use the odoo video embed, I get a vertical video that is squeezed down into a horizontal frame with big black squares on each side. Is there a way to better present vertical video on Odoo websites where it shows as almost full screen when viewed on phone?

All suggestions are appreciated!

Avatar
Descartar
Mejor respuesta

Hi,


To display vertical videos effectively on your Odoo website for mobile viewers, avoid simply embedding standard YouTube videos, which will result in a squeezed, letterboxed appearance. The best approach is to edit the video to fit a horizontal aspect ratio (16:9) by adding blurred or stylized backgrounds to fill the sides, then upload to YouTube and embed as usual. This provides a professional look and works seamlessly with Odoo's video embed.


Alternatively, for more control, use a custom HTML embed with CSS to style the video player and make it responsive, adjusting the aspect ratio for smaller screens. You could also consider uploading to platforms like TikTok or Instagram Reels, designed for vertical video, and embedding from there. For advanced users, JavaScript libraries offer the most control but require significant web development skills. Ensure your website is mobile-responsive and optimize your video for web delivery.


Sample Code:-


<div class="video-container">

    <iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>


<style>

.video-container {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 aspect ratio */

    height: 0;

    overflow: hidden;

}

.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}


@media (max-width: 768px) { /* Adjust for smaller screens */

    .video-container {

        padding-bottom: 177.77%; /* 9:16 aspect ratio */

    }

}

</style>


Hope it helps

Avatar
Descartar
Publicaciones relacionadas Respuestas Vistas Actividad
1
nov 24
3208
1
jun 23
3024
2
sept 25
4018
1
jul 25
1470
2
jun 25
2983