how to edit videobackground

Linda MacDonald

I have fiddled around with this template for ages:

http://maloybyggas-4e30f7.norgeweb.design/preview/index.html?from-preview=1&from=index&timestamp=1615296613007

I would like to change the video background and almost got it to work, but when I saved my changes it just disappeard. I would like to use publit.io as I have an account and don't really like using youtube or vimeo. I have the possibility to embed an iframe and that seemed to work except when I saved and closed the code-editor it just dissappeard. or is it possible to add my video to the backend and then link to it from there?

also is it possible to maintain the transparent header on tablet and mobile? at the moment it gets this white background

thanks in advance
Linda

Wassim

Hey,

Can you show some screenshot of how you tried to put your video?
You can also build in a homveVideoContainer section a custom embed code :

<style>
    #homeVideoContainer video {
        width: 100%;
        background: #fff
    }
</style>
<div id="homeVideoContainer">
    <video loop="loop" playsinline="playsinline" autoplay="autoplay" muted="muted" poster="LOADING_IMAGE_OR_GIF_URL" class="translated-elem translatable-attrs" translatable-attrs="src" translation-src-fr="VIDEO_URL_IN_FR"
        src="VIDEO_URL_IN_PAGE_LANGUAGE">
        </video>
</div>

Well bonus it's from a website where the URL changes based on the user language

Linda MacDonald

@Wassim super awesome with the custom video can I use that for a background video?
I went into the code editor because I can't see the video anywhere in the pagebuilder - the demo video is a vimeo video...problem being I keep deleting too much in order to replace it with my own...I really want to keep the text overlay sections from this template and just switch the demo video to mine if possible? I tried editing the following code (please click the link to see my screenshot) everytime I try I loose the text overlay and then when I really got into it I managed to delete the navigation AND pagebuilder functionality entirely lol ( here is the stuff I would like to keep: https://www.awesomescreenshot.com/image/6528154?key=8ba259f2cf433bf4cfdcd745b2b222ff)

https://www.awesomescreenshot.com/image/6527939?key=3640c4ff1e164b672e815160643c2a13

Wassim

@Linda-MacDonald said in how to edit videobackground:

@Wassim super awesome with the custom video can I use that for a background video?
I went into the code editor because I can't see the video anywhere in the pagebuilder - the demo video is a vimeo video...problem being I keep deleting too much in order to replace it with my own...I really want to keep the text overlay sections from this template and just switch the demo video to mine if possible? I tried editing the following code (please click the link to see my screenshot) everytime I try I loose the text overlay and then when I really got into it I managed to delete the navigation AND pagebuilder functionality entirely lol ( here is the stuff I would like to keep: https://www.awesomescreenshot.com/image/6528154?key=8ba259f2cf433bf4cfdcd745b2b222ff)

Hi, sure you can make it easily than what you're trying to do. Drag and drop an embed source code block and set the video to a negative z-index in absolute position. It will be place in the back of the section. (don't forget to set the background of your section to transparent)

Linda MacDonald

@Wassim I got there sort-of-ish problem being that using the embed blocks don't permit me to drop them in the actual section, I can only drop them in a column so I cannot get the video to take up the actual background. please see link to my screenshot: I just generated an iframe from publit.io in order to check if I could get it to work. Perhaps I can do this differently in order to get my video into my actual appdrag project? this is the code that I am using in my custom embed block
<div>
<div style="left: 0; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0); padding-bottom: 56.25%; z-index: -2;">
<figure style="left: 0; width: 100%; height: 0; position: absolute; z-index: -1; padding-bottom: 56.25%; margin-block-end: 0; margin-block-start: 0; margin-inline-start: 0; margin-inline-end: 0;"><iframe src="https://media.publit.io/file/videojulehilsencompressed.html?player=sjonband" scrolling="no" style="border: 0px; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; overflow: hidden;" allowfullscreen=""></iframe></figure>
</div>
</div>

and here is the screenshot. Now the text is in front and it is editable with appdrag, but the position of the video is not right - please click on the url to see my screenshot

https://www.awesomescreenshot.com/image/6549268?key=5ee241cbff662a98566c8f8a71348673

Wassim

@Linda-MacDonald said in how to edit videobackground:

@Wassim I got there sort-of-ish problem being that using the embed blocks don't permit me to drop them in the actual section, I can only drop them in a column so I cannot get the video to take up the actual background. please see link to my screenshot: I just generated an iframe from publit.io in order to check if I could get it to work. Perhaps I can do this differently in order to get my video into my actual appdrag project? this is the code that I am using in my custom embed block
<div>

what if you go to your section > position and set it in fullwidth?

Linda MacDonald

@Wassim Hey there :)the column that the video is in is at 100vh, vw too but it doesn't take the video to full viewport - the section behind the columns is also set to 100 vh vw and I suspect that's where I need to get the video to go because the section has the right size, but I cannot place a custom block directly into a section...please see screenshot

https://www.awesomescreenshot.com/image/6583445?key=8f7e6bb6adfd6254191b9ad6f3c0702e

Linda MacDonald

@Wassim hey there any news on this one?

Hey there :)the column that the video is in is at 100vh, vw too but it doesn't take the video to full viewport - the section behind the columns is also set to 100 vh vw and I suspect that's where I need to get the video to go because the section has the right size, but I cannot place a custom block directly into a section...please see screenshot

https://www.awesomescreenshot.com/image/6583445?key=8f7e6bb6adfd6254191b9ad6f3c0702e

Wassim

Your section isn't fullwidth as advised. If it was your column would be 100%.
Another solution, add an id to your video, add an id to your section and add a script to move the video inside the section (out from the column)

<script>
  document.getElementById('yoursection').appendChild(
    document.getElementById('yourvideo')
  );
</script>

Linda MacDonald

@Wassim I must have looked at the section a gazillion times BUT you're absolutely right it wasn't set to 100% but now it is and all is well thanks a mil.

Wassim

You're welcome, glad you made it work

REMINDER

how to edit videobackground