Printable View
Hi, does anyone know if it's possible to use a short video as a pasteboard background?
I imported a small mp4 file onto my page.
Under 'Position on page' I selected 'stretch on page'. It allows me to tick this option but nothing happens?
Ideally I'd like full screen auto start.
Thanks
Hi Teeser,
The "Stretch with Page" option, is actually for when your editing your website within Xara, this forces the video to stretch if you decide to increase the length of the page. There is the ability to make objects full width/height, however this cannot be applied to widgets/placeholders, you can insert a video and place it on the Pasteboard layer and resize it, however it's not possible to set it to fit the screen etc.
Hi thanks Ben, thanks for your thoughts.
This is the kind of thing I would like to be able to do: http://www.variousways.com/#section1
I tried with a gif. No joy there either.
Any ideas?
sure you can
i only tried with a gif, hacked it royally just to try, but...
put the image on the mouse off layer at the top like you would with any other top banner, behind all other objects and make sure that it is as wide as you can make it (centered and wider than the page background by far. i started with 2000px and needed to adjust it in the code. maybe could've just made it wider in xara too. ionno..)
all the remaining sections of the layer must have a transparent background
create the html
edit the index.htm with notepad++ or sublime (or whatever) and search for where it calls the gif towards the top
add the text "position: fixed" and save
open the index.htm with a browser to view it in action. you might see that you also need to change the width value where you just added the position variable too
i'm not too up on these things but it took a long time to load in chrome. firefox and edge loaded right awayCode:<img class="xr_ap" src="index_htm_files/tach_modded_flammed_Blk.gif" alt="" title="" style="left: -453px; top: 93px; width: 2928px; height: 647px; position: fixed"/>
then, in my case, it would be a bunch of trial and error to get it looking perfect. and i might try an mp4 later too. this video idea seems pretty cool
edit: again, n00b talking here. that is using only one long index page naming the different sections for the nav buttons to link to and pull up. not different pages. might not be that easy using multiple pages
'course you can.
Drop the mp4 onto your page.
Select it and open the Placeholder HTML body (code).
Copy all that and then open the Page bode (code) and place the <object....</object> detail between an outer <div> </div> pair.
Save that and delete the original.
Acorn
hey Acorn...
trying it with an mp4 now, it works the way i explained above which is kinda the wrong way if you update from Xara frequently (cos you gotta go and code it back every time) so your way seems the right way but....
i can't get it to work your way :D
the original still pops up (and autoplays as it is set to do) along with the full width version which does nothing - static image
a little more help purty please :p
Mike, Perhaps it was luck when I dragged my mp4 file onto the MouseOff layer and selected AutoPlay.Quote:
Originally Posted by mikeymopar
I copied its Placeholder code as described and then deleted the original.
Everything worked.
The Xara internal browser is reporting back as unsupported format so you need to view it in an external browser - all work for me.
If you see the first frame then it is set up for AutoPlay.
Can you see a control bar pop up at the bottom of the page?
Perhaps there is a conflict with the internal viewer and an external one happening together for the same file?
Sorry it's not doing what I advised,
Acorn
it's all cool acorn. it's difficult to test all variables when one is just testing something quick out to help out someone else.
i played a bit more with it and still couldn't accomplish it within xara alone. the smaller original mp4, even being deleted, still auto-plays at the top and also the mp4 copy fills the page as called for but doesn't auto-play unless clicked (either directly on or using the control bar popup).
no worries. the op has apparently moved on or solved his problem and i just try to learn everything you guys post. i can modify the resulting index.htm after following your steps to get it to function tho it's a little more hidden than the way i described above.
i'm fine as it all stands. thx!
Curiosity got the better of me and I thought how hard would it be to make a video background, here is my attempt:
http://robert74.magix.net/video-background/
I would suggest uploading your video to YouTube and use the project linked on that page to import it into Xara.
Use the ID "xr_xr" for the wrapper.
Thanks
Rob
I forgot to mention it was a powerpoint that was save as a mp4 and then converted it to h264
Nice one Rob, going to check that out when I get the chance.
Respect.Quote:
Originally Posted by Rob-Xar
It will be asked, so could you upload your design file?
Acorn
Hi,Quote:
Originally Posted by Acorn
Please see file here: Attachment 109673
Thanks
Rob
i like how it's auto-scalable from the get-go. only drawbacks (at least for me) is not being able to test it off-line as stated in the plug-in description coupled with the fact that it's only for youtube videos.Quote:
Originally Posted by Rob-Xar
all in all it's a clean process and was easy to incorporate. nice find and share Rob. yet another bookmark. thx
I gave this a go but it doesn't seem to get on well with stickies. The background video is ok but other page elements end up displaying over my sticky header instead of the other way around. Also it looks like embedding youtube videos with default iframe code makes them appear over stickies too.
Edit: just discovered if you set the option wrapperZIndex to a lower number like 1 it seems to work ok with stickies.
Code:<script>
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3, wrapperZIndex: 1 };
$('#xr_xr').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
</script>
Hi Rob-Xar, your 'attempt' is brilliant! Just what I am looking for. http://robert74.magix.net/video-background/
Could you please explain to me in really easy, step by step idiot's language how you did that?
Many thanks Teeser
hmmm. did you follow the link that is in his example that you quoted ^Quote:
Originally Posted by Teeser
it takes you to the plug-in developer's page. (and you need an editor like notepad++ or sublime)
copy paste steps 1 and 2, find the end </head> in your index.htm and copy it just before it
copy step 3 just before the end </body> in your index.htm between a <script> </script> blockCode:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="index_htm_files/jquery.tubular.1.0.js"></script>
</head>
on the left under downloads, dl the tubular zip and in the js folder copy the jquery.tubular.1.0.js file to your index_htm_files folderCode:<script>
$('document').ready(function() {
var options = { videoId: 'w7JrHIHi8t0', start: 0 };
$('#xr_xr').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
</script>
</body>
now, find the youtube video id you want to use and copy it to the videoID from his step 3 (the part you copied to the <body>)
should be good to go from there
Hi mikeymopar, thanks for that. Scary... I'll give it a go. Watch this space. :-)
I think this is a good Xara example> http://xaratemplates.com/vendors/xar...xt93-template/
It completely breaks in IE8, they need to add a IE conditional comment for their background video.
Come on Michal you can do better than that!