-
Posts
-
Hey guys,
On many sites I make I have a nice background video to autoplay on the homepage: see https://villaitaly.it for example.
Now, I would like to put a background video that’s on Wistia – as Wistia has enabled a new feature that allows videos to play automatically even on mobile with the bonus of being muted and a button to unmute them which is simply awesome.
I’d like to know how can I put them on a background section like in the homepage of https://villaitaly.it , so they display full screen, are responsive and I can keep having taglines such as on http://www.vacationrentalsecrets.com (now on this site you see a black screen with the tagline AWE.INSPIRE.CONVERT – there used to be a video playing in the background but it was with Vimeo which turned my account off because they just moved from free to paid accounts and I don’t want to pay Vimeo to host a few videos).
Any clue with a solution?
FYI this is the code that Wistia gave me for the embed:
<script src=”https://fast.wistia.com/embed/medias/ucj8qub19k.jsonp” async></script><script src=”https://fast.wistia.com/assets/external/E-v1.js” async></script><div class=”wistia_responsive_padding” style=”padding:56.25% 0 0 0;position:relative;”><div class=”wistia_responsive_wrapper” style=”height:100%;left:0;position:absolute;top:0;width:100%;”><div class=”wistia_embed wistia_async_ucj8qub19k videoFoam=true” style=”height:100%;width:100%”> </div></div></div>
If I look for a single link, this is the oEmbed URL Wistia gives, but it’s not working:
https://casateulada.wistia.com/medias/ucj8qub19k?embedType=async&videoFoam=true&videoWidth=640Thank you for your help.
Antonio
Hey Antonio,
What you can do, is use a full section area, add an HTML widget inside and load the JS.
That will – most probably – make things work properly as you require.have you tried that trick?
Best regards,
BasilisHI Basilis,
I have tried that, but the video doesn’t load full screen and I can’t add headers like the one currently on the site.
Any other way?
Hi,
What do you mean that you can add headers, can u help me understand please?
Thank you
Best regards,
BasilisSure @Basilis :) if you go to https://vacationrentalsecrets.com/ and you look at the first section you’ll see what I mean: a video background on autoplay and a heading (Awe.Inspire.Convert).
I would like to be able to add that video background full screen using Wistia
Hi @basilis, did you have a chance to look at the question (I know you guys are all busy :) )
To give you a better idea the effect Wistia does is the one you can see from the video loading and playing automatically also on https://vacationrentalsecrets.com/fully-booked-formula/ on the left of the above the fold area.
You’ll see that:
1) the video is muted by default, but gives the option to unmute it.
2) it loads beautifully on mobile devices as wellNow, I would like to turn the (Youtube) video that’s playing full screen on the homepage of https://vacationrentalsecrets.com/
into the same video rendered by Wistia, using possibly a background section so it allows for the taglines to show (AWE.INSPIRE.CONVERT).
The problem is that apparently you can only use the Wistia code (not the Wistia video url) or a Wistia oEmbed URL which doesn’t seem to work.Thank you
on advanced layout builder first place a code element on top
after that a color-section with your headings or something else (other alb elements)
to get not in conflict with the video control elements do not choose the 100% height !
but another height will do the job. ( i can not see to avoid that control elements will come to front on video click or hovering)in the code block – do not mark any of the checkboxes ( it is your code with right exclamation marks):
<script src="https://fast.wistia.com/embed/medias/ucj8qub19k.jsonp" async></script> <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script> <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"> <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"> <div class="wistia_embed wistia_async_ucj8qub19k videoFoam=true" style="height:100%;width:100%"> </div> </div> </div>the code to have now the full-width option is (in this case to be more specific i do infront the page-id): .page-id-30380 .container_wrap_first .container { max-width: 100%; padding: 0 } .page-id-30380 .container_wrap_first .content { padding: 0; } .page-id-30380 #av_section_1 { position: absolute; top: 0; background-color: transparent !important; }see result here: https://webers-testseite.de/wistia/
for responsive case on very small screens you have to find yourself a solution – maybe not to display the video
or to shrink content of the color section beneath etc.in my case to have full-width video:
@media only screen and (max-width: 767px){ .responsive #top.page-id-30380 #wrap_all .container_wrap_first .container{ max-width: 100% !important; width: 100% !important; padding: 0 } }but there must be a solution than for color-section content – as you can see on my test page above
Thank you so much @Guenni007 :)
I will try your solution and will report here if that solves the issue.Unfortunately, I do not understand your explanations Guenni007 so I will have some issue applying what you wrote.
Hi,
I think @guenni007 wanted you to put the wistia embed code in a code block element and then add the css code in the Quick CSS field. Did you do that? Please note that the wistia script creates another frame so it’s not compatible with any elements that support video background.
Best regards,
IsmaelHi Ismael,
Thank you for the explanation. I tried as you say and it works.
In order to have the effects of the elements that support video background I’ll have to probably look for another solution.
Thank you @guenni007 and @Ismael
Antonio
- The topic ‘Video background embed’ is closed to new replies.