Search…

X3 Photo Gallery Support Forums

Search…
 
deronkel
Topic Author
Posts: 6
Joined: 27 Jan 2015, 14:43

Video Intro

06 Aug 2017, 08:08

Hello Karl,

I have the possibility to let the page intro a text invite. I would like to run a video intro. Is there the possibility to display a text over the video?

Sorry for my bad English.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video Intro

07 Aug 2017, 00:44

Hi. I would have liked to answer "yes", but unfortunately there is no X3 feature for this, and when looking into a fix, it was more complicated than I anticipated. I will look into this for a future release, but in the meantime, it would have to be done by the javascript and CSS fix below ... I would only proceed if you were somewhat comfortable with html and CSS:

Go to panel > settings > custom > custom CSS:
Code
.overlay-text {
  position: absolute;
  top: 0;
  z-index: 33;
  color: #FFFFFF;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  pointer-events: none;
}
.overlay-text * {
  pointer-events: auto;
}
Custom Javascript:
Code
function x3_load_page(){
  var body = $('body'),
      stale_overlay = body.children('.overlay-text'),
      overlay = body.find('.content .overlay-text');

  if(stale_overlay.length) stale_overlay.remove();
  if(overlay.length) overlay.appendTo(body);
}
Should now look like this:
Image

Then, in the PAGE > content where you want to add the text, add inside a div element with "overlay-text":
Code
<div class="overlay-text">
Blah Blah blah <strong>more bold text!</strong>
</div>
The text will overlay the video and center-align. You can use HTML inside the overlay-text element, but you will need to adjust the CSS if you want to customize the text/style/size/color.
 
User avatar
npn
Posts: 5
Joined: 09 Dec 2018, 19:39

Re: Video Intro

04 Feb 2020, 15:46

:)!
 
User avatar
npn
Posts: 5
Joined: 09 Dec 2018, 19:39

Re: Video Intro

04 Feb 2020, 17:06


Could you tell us if it is possible to use Page Intro plugin without photo above video intro only to use title description and content of page intro? The suggestion made above generates some errors in mobile versions and using scroll.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video Intro

04 Feb 2020, 21:37

npn wrote:Could you tell us if it is possible to use Page Intro plugin without photo above video intro only to use title description and content of page intro? The suggestion made above generates some errors in mobile versions and using scroll.
Sorry, your question is not clear. You want an intro without photo or video? The only point of that would then be to use a gradient or background color, which is possible with the image intro plugin. Examples:
https://demo.photo.gallery/examples/plu ... -gradient/
https://www.photo.gallery/contact/
 
User avatar
npn
Posts: 5
Joined: 09 Dec 2018, 19:39

Re: Video Intro

11 Mar 2020, 14:22

Excuse my English, Karl. If you activate the page intro plugin and video plug in simultaneously you could solve this if the image/gradient for intro layer is located above the video layer with a transparent pixel/gradient vignette and not below as it currently happens. You would use title, description and context of the image intro component only. 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video Intro

11 Mar 2020, 22:14

Yes, but surely you are not suggesting we implement it like this? The video-intro and page-intro have different logic in terms of sizing, and of course it would only work if you use a transparent (or semi-transparent gradient). This is a hack at best, and it's pointless to try to implement this as a feature with layered intro plugins.

If anything, why not a feature to add title + description also over video, as a feature of the video intro plugin? That would at least be logical and feasible.
 
User avatar
npn
Posts: 5
Joined: 09 Dec 2018, 19:39

Re: Video Intro

17 Mar 2020, 17:01

Hi Karl !
I try to tell you that maybe the title, the description (and maybe also only gradient) are a common tool (common possibility) to all intro plugins. that they are separated enhance the number of options and it is simply a suggestion in the way of organizing it. I really appreciate your work. Thanks!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video Intro

18 Mar 2020, 01:02

Right, it would perhaps be best with one all-inclusive intro plugin that could display gradients, images and video. For now, this might have to wait for an update to the X3 core (which I am considering). 
 
User avatar
TristanJo
Experienced
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Video Intro

18 Dec 2022, 06:45

mjau-mjau wrote: 안녕하세요. "예"라고 대답하고 싶었지만 안타깝게도 이에 대한 X3 기능이 없으며 수정 사항을 살펴보면 예상보다 복잡했습니다. 향후 릴리스를 위해 이것에 대해 살펴 보겠지만 그 동안에는 아래의 javascript 및 CSS 수정으로 수행해야합니다 ... html 및 CSS에 어느 정도 익숙한 경우에만 진행하겠습니다.

패널> 설정으로 이동 > custom > custom CSS: Custom Javascript: 이제 다음과 같아야 합니다. 그런 다음 PAGE > 텍스트를 추가하려는 콘텐츠에서 "overlay-text"를 사용하여 div 요소 내부에 추가합니다. 텍스트가 비디오와 중앙에 오버레이됩니다. -맞추다. 오버레이 텍스트 요소 내에서 HTML을 사용할 수 있습니다.
Code
.overlay-text {
  position: absolute;
  top: 0;
  z-index: 33;
  color: #FFFFFF;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  pointer-events: none;
}
.overlay-text * {
  pointer-events: auto;
}
Code
function x3_load_page(){
  var body = $('body'),
      stale_overlay = body.children('.overlay-text'),
      overlay = body.find('.content .overlay-text');

  if(stale_overlay.length) stale_overlay.remove();
  if(overlay.length) overlay.appendTo(body);
}
Image

Code
<div class="overlay-text">
Blah Blah blah <strong>more bold text!</strong>
</div>
Hi~ karl~~~

When I applied this code, the text appears on the menu bar.

Is it a z-index problem?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video Intro

18 Dec 2022, 07:00

TristanJo wrote:Is it a z-index problem?
Do you have a link? That code was provided 5 years ago ...
 
User avatar
TristanJo
Experienced
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Video Intro

18 Dec 2022, 12:35

mjau-mjau wrote:
TristanJo wrote:Is it a z-index problem?
Do you have a link? That code was provided 5 years ago ...
http://3.34.138.237/

plz~ karl~~~~~🥰
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video Intro

18 Dec 2022, 23:34

TristanJo wrote:plz~ karl~~~~~🥰
It seems to be working, no?
Image
 
User avatar
TristanJo
Experienced
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Video Intro

19 Dec 2022, 03:11

mjau-mjau wrote:
TristanJo wrote:plz~ karl~~~~~🥰
It seems to be working, no?
Image
Snipaste_2022-12-19_17-08-16.png
Snipaste_2022-12-19_17-08-16.png (363.58 KiB) Viewed 2220 times
"Overlay text" is on top of the menu.:rofl:
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Video Intro

19 Dec 2022, 10:12

Maybe try this instead. In the CSS, change z-index to 3 instead of 33:
Code
z-index: 3;
Javascript, please try this:
Code
function x3_load_page(){
  var overlay = document.getElementsByClassName('overlay-text')[0];
  if(!overlay) return;
  document.getElementById('content').append(overlay);
}