Video Testing
The above video
Is hosted on Vimeo
It will autoplay on desktop browsers as well as Android and Apple phones. Having no sound on the video is what makes this work.
A logo has been overlayed over the video for testing.
Video With Text Sections
Different video on mobile
16 / 9 on desktop, 9 / 16 on mobile
Using ‘Fit to the space’. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus orci id venenatis pharetra. Curabitur consectetur vel dolor ut faucibus. Ut vitae felis vel velit suscipit blandit at placerat lacus. Praesent sed tincidunt massa. Sed sed felis aliquet enim placerat laoreet. Morbi ullamcorper efficitur sodales. Quisque orci mauris, convallis sit amet tellus sit amet, laoreet consectetur tortor. Phasellus eu justo ipsum. Nunc ultrices ac urna eu ullamcorper.
Different video aspect on mobile
Fill on desktop, 4 / 5 on mobile
Using ‘Fill the space’. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus orci id venenatis pharetra. Curabitur consectetur vel dolor ut faucibus. Ut vitae felis vel velit suscipit blandit at placerat lacus. Praesent sed tincidunt massa. Sed sed felis aliquet enim placerat laoreet. Morbi ullamcorper efficitur sodales. Quisque orci mauris, convallis sit amet tellus sit amet, laoreet consectetur tortor. Phasellus eu justo ipsum. Nunc ultrices ac urna eu ullamcorper.
Video with Text
Video set to 'fit'
This video is set to fit the video area. Small amount of text.
Video with Text
Video set to 'fit'
This video is set to fit the video area. This means if the text is long (or a narrow column layout set for the video), there will be white space above and below the video, but the whole of the video is visible (not cropped).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas erat nulla, vestibulum vitae efficitur sit amet, interdum at est. Quisque enim sapien, aliquam nec lobortis non, ultricies vitae sapien. Vivamus euismod tincidunt egestas. Nulla nec vulputate elit, in porttitor turpis. Donec fringilla libero eu placerat placerat.
Donec sit amet felis est. Pellentesque et ultricies urna. Integer ac tellus massa. Aenean elementum lacus non varius aliquet. Nam nunc libero, aliquet non cursus sed, fermentum ut elit.
Donec id elit velit. Vestibulum in congue justo, at vehicula purus. In fringilla ultrices nisi, quis posuere erat tristique ac. Pellentesque eget iaculis neque, ac pellentesque nibh. Phasellus pharetra ante ex, eu sodales tortor ultrices vel.
Video set to 'fit'
Resizing the browser to a narrower width will introduce white space above and below. This is due to the narrow layout column setup.
Video with Text
Video set to 'Fill'
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Video with Text
Video set to 'Fill'
Video set to fill the area next to text. There will be limitations if the text section gets too high (will need to be a lot of text to cause this however).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur, mauris ut bibendum ornare, erat risus condimentum mi, in gravida lectus tellus sed odio. Cras porta felis nec erat ultrices maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer ac nulla non felis commodo aliquet. Suspendisse bibendum pulvinar arcu, quis mattis felis.
Praesent vitae dictum sapien. Suspendisse eget lacus non purus semper dapibus. Curabitur interdum ligula quis posuere eleifend. Phasellus ipsum ex, imperdiet et magna id, imperdiet malesuada odio. Integer consequat nulla ac sem faucibus feugiat.
Etiam aliquet faucibus elementum. Duis at risus quis ante scelerisque lobortis. Proin iaculis risus non arcu lacinia, molestie faucibus felis semper.