REMINDER
how to edit videobackground
-
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
-
@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
-
@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)
-
@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
-
@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?
-
@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
-
@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
-
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> -
@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. -
You're welcome, glad you made it work
