How do you create a full screen video background similar to your demo http://demo.megadrupal.com/d7/md-avendor/onepage-dark I would like to have it loop. So far I have only been able to make the entire page a video background. Also what is the recomended video resolution to fit the best?
Wed, 02/17/2016 - 13:11
Hi,
Please go to admin/structure/block/manage/block, take a look at a block named [MD] Avendor Video for example. It is background video that you can see from our demo.
That works but as you can see its not full screen http://z4tq2.hosts.cx/avendor/
Also it stays in place and does move
So please send us your admin account by private comment.
Check page /avendor/user please. We changed some code in file special-block.js (sites\all\modules\custom\md_block_custom\special\block_view\js).
That works however only in Chrome IE or Safari just shows a big empty space. Any way to get it to work in those browsers?
Could you send us some screenshots?
Attached is a screen shot from IE, it just stays on the backfround image, Safari works but takes a long time to load. The other problem is at mobile resolutions the bacground image is not show only a large empty area.
Maybe your browser and network make it load in a long time. We check many times and it works, on IE (a bit slow) and mobile also. Please check again and if problem still exits, you could send us a screenshot of site on mobile.
Also there is another problem that happens sometimes. When the page loads it shows the fallbacl image but it does not fill the whole screen even though its 1920x1080 see screenshot
Could you check site again? We fixed.
It seems to work better thank you. I have another problem, 8 out 10 times I visit the site it gets stuck on the screen you can see in the attached screen shot
Could you check your network a site settings if somthing makes site can not any js file leading to this problem? We tried many times but could not see as your attached screenshot.
I have not been able to find anything wrong with the network and the problem happens across all browsers. Could you teake another look please? Could you tell me how to remove the slider on the main page under the video? Thanks http://cw9sw.hosts.cx/avendor
Delpadre,
Please help us check if it works.
The slider on the main page is gone thank you, however it still loads very slow. The host said that they downgraded the PHP version but iy did not seem to help much.
Sorry,
We think you need to check site again. Our developer tried many solutions, even use a new video type but it still can not work stably. Maybe there is any module or code makes your site slow and unstable.
We tried to work with other test sites too, all results are good but not your site.
Thanks for looking into it, I have a new problem. I changed the video to a new one and the top and botom are getting cut off however the YouTube video is not like that. You can see here http://nfbnx.hosts.cx/avendor/
When using a fullscreen in site, because default ratio of video is 16:9 or 4:3 it can be cut off top or bottom to display menu.
You can go to sites\all\modules\custom\md_block_custom\special\block_view\js, open file special-block.js replace
if(windowWidth>=320) {$('.special-video').css({'height': $(window).height()-$(".header-wrapper").height()+'px'});
}
with
if(windowWidth>=320) {$('.special-video').css({'height': $(window).height()+'px'});
}
Thanks I got a new problem, the image does not sctrech across the screen for the videeo while its loading
Please try to add following code at the end of file sites/all/themes/md_avendor/css/md_avendor.css:
Sorry I tried it and it does not work.
Check your site please. We fixed by with solution at my above comment (#25).
Thank you, I think I had a wrong charactor in mine