Stretchiing video

[nobbyy]

Hi all

My latest quest is to be able to add video in a wide format.

I have tried to import video and use the stretch function - all this seems to do is add a full width black box with the video playing in the centre.

What I would like to do is be able to use video almost as a 'fill' for a placeholder and then be able to stretch it - I don't mind if it is almost a 'letterbox' effect as long as the video is wide, but not necessarily tall.

I did do a search on the forum and did find a couple of threads re full screen video backgrounds but they didn't achieve the effect I am looking for.

[nobbyy]

I had another trawl through the forum and found this code for the page header:

<style>
.xw_stretch {left:50% !important;}
.xw_stretch_stick {position: fixed !important; left:0 !important;}
.xw_stretch, .xw_stretch_stick {-webkit-transform-origin:0 0; -moz-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0;}
</style>
<script>
function xw_stretch_exec(e,f,m){
var scale="scale("+(f/parseInt(e.style.width))+")";
if (m) e.style.marginLeft=(-f/2)+"px";
e.style.msTransform=scale;
e.style.OTransform=scale;
e.style.WebkitTransform=scale;
e.style.MozTransform=scale;
}
function xw_stretch(){
var fullwidth=parseInt(window.getComputedStyle(documen t.body).width);
[].forEach.call(document.getElementsByClassName("xw_ stretch"),function(e){xw_stretch_exec(e,fullwidth, 1);});
[].forEach.call(document.getElementsByClassName("xw_ stretch_stick"),function(e){xw_stretch_exec(e,full width,0);});
}
window.addEventListener("resize", xw_stretch);
window.addEventListener("load", function(){xw_stretch();setTimeout(xw_stretch,100) ;});
</script>

And applying this name to the video file htmlclass=xw_stretch give me nearly what I want ie the video goes full width, unfortunately it also goes full height - is there any way to limit the height to that of the placeholder?

[siran]

If you have the chance to wrap the video code into a DIV you can use the code from THIS POST.
You will have to specify the video file dimensions at the video and the enclosing DIV and you have to make the DIV to not display overflowing content, so the placeholder code might look like this:

<div class="xw_stretch xw_str_bottom" style="width:320px;height:180px;overflow:hidden;">
<video src="index_htm_files/video.mp4" width=320 height=180 autoplay loop></video>
</div>

If you ommit the xw_str_bottom class the stretching will be done relative to the center, if you replace it with xw_str_top...

See EXAMPLE (very poor resolution for reduced file size).

Unfortunately I can't attach files from this computer.

[nobbyy]

Hi Siran

Many thanks for taking the time to respond - I really appreciate it!

I have tried following the steps in the link you provided and I can get the slideshow to work and stretch but fail when I try to add video.

When you are able could you upload the Xara files so that I can try and follow your steps please?

Thanks again!

[nobbyy]

After much experimentation I think that I have got it working!

Thanks again Siran.

[siran]

Nice to hear that.
I am at a computer where attaching should work...

[nobbyy]

Hi again Siran

Thanks for posting the file your example looks perfect, but I am having some problems when I add my own video file.

Can I check the process please?

I have dragged and dropped the video file in place and added the code below to the video placeholder:

<div class="xw_stretch xw_str_bottom" style="width:320px;height:180px;overflow:hidden;">
<video src="index_htm_files/video.mp4" width=320 height=180 autoplay loop></video>
</div>

When I preview the page the video has not stretched.

Sorry if I am being incredibly stupid, but could you help please?

[siran]

Did you drag the video to the document of the example file or did you create a new document? If the later you need to copy over the code from the page head of the example file.

[nobbyy]

I dragged video onto page and copied placeholder code from your example into placeholder body of new video - then deleted your video.

I also tried creating a new file - copied the the code from the page head, dragged the video onto the page and added the code to the placeholder body - without any success.

I am obviously missing a step out, but I am bemused as to what it is!

[siran]

What you did should work. Just tried it.
You have to change the filename in the placeholder to the one you dragged in and you have to adjust the width and height values in the placeholder code to that of your video.
You may not leave the class added by Xara (class="xar_meplayer"), this would interfere with the code.
It is best to reduce the placeholder to the page width, but that should not stop the video from stretching.