Hi Team,
Is it possible in appery to play a repeatable video/gif in the back ground?
If its possible, How to reproduce that?.
Thanks a lot,
She
Hi Team,
Is it possible in appery to play a repeatable video/gif in the back ground?
If its possible, How to reproduce that?.
Thanks a lot,
She
Hi Team,
This is the screen shot of my sample work.
https://d2r1vs3d9006ap.cloudfront.net...
i add HTML component and add the following code:
code
<p><video id="bgvid" width="320" height="240" autoplay="autoplay" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" loop="loop"><source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm" /><source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" /><object id="bgvid" width="320" height="240" data="../../resources/editor/js/libs/tinymce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash"><param name="src" value="../../resources/editor/js/libs/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=http%3A//demosthenes.info/assets/videos/polina.mp4&poster=https%3A//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /></object> <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button --> </video></p>
/code
How can i add this video into the full background of a device.
Thank you in advance,
She
Hello She,
You can add a gif file as a background:
https://devcenter.appery.io/documenta...
But it would be really hard to implement video as a background. You may try to put video component on a page and then with margin option "put" other components over it.
Hi Evgene,
Do you think there's a plugin of video bg,that will fit in appery?
if there's a plugins, how can i execute that plugin?
Thank you.
She
It is not a plugin, it is a simple CSS.
Hi,
Do you know how can i adjust the video component to be a background?
Thanks,
i read this article about the video background,:
http://slicejack.com/creating-a-fulls...
where can i put the div in the mobilecontainer?
Hi Team,
i encountering problem i already get the javascript code for css and div. here are the code in page show javascript:
code
$('div[dsid="mobilecontainer"]').append('<video autoplay loop poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg">id="bgvid" loop<source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm" /> <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4" /></video>');
$('div[dsid="mobilecontainer"').css(
"video" , "position:fixed",
"top: 50%",
"left: 50%",
"min-width: 100%",
"min-height: 100%",
"width: auto",
"height: auto",
"z-index: -100",
"transform: translateX(-50%) translateY(-50%)",
"background-size: cover",
"transition: 1s opacity"
);
$('div[dsid="mobilecontainer"]').css(
"body","margin: 0",
"background: #000"
);
/codeand in css i put :
code
@media screen and (max-device-width: 800px) {
html { background: url(//demosthenes.info/assets/images/polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
/code
i want that video is going to the background of this page.
screen shot is in below
https://d2r1vs3d9006ap.cloudfront.net...
there's no error
https://d2r1vs3d9006ap.cloudfront.net...
i followed the ff link for referrence :
http://codepen.io/dudleystorey/pen/knqyK
i hope you can help me here..
Thanks,
She
Hi She,
What you mean by "play in background" ?
If you want just to hide the video you can use following JS code instead of yours:
precode
var video = jQuery('<video autoplay loop poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg">id="bgvid" loop<source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm" /> <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4" /></video>');
$('div[dsid="mobilecontainer"]').append(video );
jQuery("video").css({width: "1px", height: "1px"});
/code/pre
Regards.