This is an example of using a standard video tag for embedding videos into a Xara design file. A key consideration is to avoid adding videos direct to a design file by adding those videos direct to a directory on the host server, and by calling them when required. In the above example, the video will autoplay and loop around, but the browser’s standard controls will allow a pause.Create a rectangle proportionally (h & w) the same as the source video. 1920px by 1080px becomes (say) 960px by 540px. This becomes a placeholder into which the following code can be inserted. “autoplay muted playsinline loop” are optional attributes (explained below).<video id="myvideo"width="100%" height="100%" controls autoplay muted playsinline loop loading="lazy"><source src="https://initiostar.co.uk/demo/Waterfall.mp4" type="video/mp4"></video>id is optional, but becomes a requirement for some of the other video examples such as the Video Library below. Source can be a local folder that is exported with the design, or as in the example here, another published folder. Most browsers will not initially autoplay with audio. To auto-start the video requires “muted” in the video tag, and in the case of iOS mobile, it further requires “playsinline”. “loop” is optional and does as it suggests. You can add other attributes such as “disabling picture-in-picture” or “nodownload” where there is a commercial value to the video, or it is subject to copyright.<video id="myvideo"width="100%" height="100%" controls autoplay muted playsinline loop disablepictureinpicture controlsList="nodownload" loading="lazy"><source src="https://initiostar.co.uk/demo/Waterfall.mp4" type="video/mp4"></video>The attribute poster=” “ can be used to create a front cover for the video if the designer wants to present an opening message or create time for the video to load in the background:<video id="myvideo2"width="100%" height="100%" poster=”https://initiostar.co.uk/assets/video-poster.jpg" controls playsinline loading="lazy"><source src="https://initiostar.co.uk/demo/Waterfall.mp4" type="video/mp4"></video>In this example, the front cover image has been loaded to another directory on the server and it is called from there. The alternative is to add the image to the design file. This option does not revert to the front cover message until the visitor refreshes the page, usually through navigating to another page and back. Refresh the page to see this happen.Here are two examples that provide the designer with the opportunity to create a video library either in a list style or gallery format:Video Library (Gallery Style)Video Library (List Style)YouTube Library Plugin (Gallery Style)
Basic Video Tag
This is an example of using a standard video tag for embedding videos into a Xara design file. A key consideration is to avoid adding videos direct to a design file by adding those videos direct to a directory on the host server, and by calling them when required. In the above example, the video will autoplay and loop around, but the browser’s standard controls will allow a pause.Create a rectangle proportionally (h & w) the same as the source video. 1920px by 1080px becomes (say) 960px by 540px. This becomes a placeholder into which the following code can be inserted. “autoplay muted playsinline loop” are optional attributes (explained below).<video id="myvideo"width="100%" height="100%" controls autoplay muted playsinline loop loading="lazy"><source src="https://initiostar.co.uk/demo/Waterfall.mp4" type="video/mp4"></video>id is optional, but becomes a requirement for some of the other video examples such as the Video Library below. Source can be a local folder that is exported with the design, or as in the example here, another published folder. Most browsers will not initially autoplay with audio. To auto-start the video requires “muted” in the video tag, and in the case of iOS mobile, it further requires “playsinline”. “loop” is optional and does as it suggests. You can add other attributes such as “disabling picture-in-picture” or “nodownload” where there is a commercial value to the video, or it is subject to copyright.<video id="myvideo"width="100%" height="100%" controls autoplay muted playsinline loop disablepictureinpicture controlsList="nodownload" loading="lazy"><source src="https://initiostar.co.uk/demo/Waterfall.mp4" type="video/mp4"></video>The attribute poster=” “ can be used to create a front cover for the video if the designer wants to present an opening message or create time for the video to load in the background:<video id="myvideo2"width="100%" height="100%" poster=”https://initiostar.co.uk/assets/video-poster.jpg" controls playsinline loading="lazy"><source src="https://initiostar.co.uk/demo/Waterfall.mp4" type="video/mp4"></video>In this example, the front cover image has been loaded to another directory on the server and it is called from there. The alternative is to add the image to the design file. This option does not revert to the front cover message until the visitor refreshes the page, usually through navigating to another page and back. Refresh the page to see this happen.Here are two examples that provide the designer with the opportunity to create a video library either in a list style or gallery format:Video Library (Gallery Style)Video Library (List Style)YouTube Library Plugin (Gallery Style)