Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    994

    Default Video header help

    The one thing I love about this forum is venturing into areas I know nothing about. Somebody always has your back.
    Our animal shelter produced a professional video, which I’d like to make a header on the opening page only. I do have some questions.

    1. If I use a placeholder can I stretch (full width) the video like an object.
    2. May I place my static (stuck at top menu) on the layer above the video.
    3. If the video is 3 min long will this effect the opening of the page dramatically.
    4. The video is from Vimeo. Would it be easier to change the code if it’s YouTube.

    Thanks everyone. I’ve not a problem with jpgs, but video is a different animal completely.

    ~Bill
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  2. #2
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Video header help

    Quote Originally Posted by bwood View Post
    The one thing I love about this forum is venturing into areas I know nothing about. Somebody always has your back.
    Our animal shelter produced a professional video, which I’d like to make a header on the opening page only. I do have some questions.

    1. If I use a placeholder can I stretch (full width) the video like an object.
    2. May I place my static (stuck at top menu) on the layer above the video.
    3. If the video is 3 min long will this effect the opening of the page dramatically.
    4. The video is from Vimeo. Would it be easier to change the code if it’s YouTube.

    Thanks everyone. I’ve not a problem with jpgs, but video is a different animal completely.

    ~Bill
    Bill,

    The starting point should be the original video, MP4 or MOV.

    1. No - (if you mean 'stretch' the placeholder to the width of the browser); yes (if you mean stretch the placeholder (video) to the width of the page). You can though create full width and full screen videos with some simple code: Examples here for desktop and mobile: https://initiostar.co.uk/demo/Video/banner.htm.

    2. Yes - but not sure what you want to achieve (maybe a banner video?). You could use a video library approach: https://initiostar.co.uk/demo/VideoPopup/. This is not a popup on a page; it places the video on its own page and that video is called from the main page. Very useful if the video has an audio track, since this actually stops video and audio.

    3. The video should sit on your server and be called from there.

    4. No - I doubt it. Much better to have the original video and control of the video.


    I’d like to make a header on the opening page only
    What had you in mind? You could add a few frames (opening sequence) to the video itself, or you could have an intro fade in /fade out text based sequence aka something like this: https://initiostar.co.uk/demo/TextFadeEmbed/

    Gary

    Live example: https://hypnosis-retreat.co.uk/index.htm
    Last edited by Initiostar; 24 February 2021 at 11:00 PM. Reason: Another Example

  3. #3
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    994

    Default Re: Video header help

    Quote Originally Posted by Initiostar View Post
    Bill,

    The starting point should be the original video, MP4 or MOV.

    1. No - (if you mean 'stretch' the placeholder to the width of the browser); yes (if you mean stretch the placeholder (video) to the width of the page). You can though create full width and full screen videos with some simple code: Examples here for desktop and mobile: https://initiostar.co.uk/demo/Video/banner.htm.

    2. Yes - but not sure what you want to achieve (maybe a banner video?). You could use a video library approach: https://initiostar.co.uk/demo/VideoPopup/. This is not a popup on a page; it places the video on its own page and that video is called from the main page. Very useful if the video has an audio track, since this actually stops video and audio.

    3. The video should sit on your server and be called from there.

    4. No - I doubt it. Much better to have the original video and control of the video.




    What had you in mind? You could add a few frames (opening sequence) to the video itself, or you could have an intro fade in /fade out text based sequence aka something like this: https://initiostar.co.uk/demo/TextFadeEmbed/

    Gary

    Live example: https://hypnosis-retreat.co.uk/index.htm
    Many thanks Gary. All my questions answered. What I need is exactly what you did on your sample. I need full width, probably 450 px. I need a step by step. My source is you tube. I know how to use placeholders for YouTube (much appreciated Egg), but I just need a starting point to place the video. Do any of the Xara widgets work for this one. I do need the stretch. Im first going to follow your directions in your sample. Thanks Gary.
    -Bill
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  4. #4
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Video header help

    Many thanks Gary. All my questions answered. What I need is exactly what you did on your sample. I need full width, probably 450 px. I need a step by step. My source is you tube. I know how to use placeholders for YouTube (much appreciated Egg), but I just need a starting point to place the video. any of the Xara widgets work for this one. I do need the stretch. I'm first going to follow your directions in your sample. Thanks Gary.
    -Bill
    Bill,

    This is not very wide as a starting point, but in any event an original MP4 is much easier to work with.

    Gary

  5. #5
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    994

    Default Re: Video header help

    Gary -- amazingly enough I did get something. I had to place the embed code in the Header and the Body. I'm going to have to play with settings to make it auto start and full width.
    (provided a screen shot)
    where did you locate the 'web export option, scale to fit width' in the program. You tube link is here .. https://www.youtube.com/watch?v=8X-f...ature=youtu.be

    Thanks Gary - this will look amazing once I get this set up.

    -Bill

    Click image for larger version. 

Name:	video header.jpg 
Views:	52 
Size:	81.1 KB 
ID:	129010
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  6. #6
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Video header help

    Bill,

    I replaced my demo video with your YouTube video (in my demo): https://initiostar.co.uk/demo/Video/utube.htm (XAR attached).

    You can check this on a desktop, tablet and mobile. Scale-to-fit-Width can be applied through Utilities/ Export Options; I usually set the maximum width to the desktop page width.

    You can certainly set the video (placeholder) width equal to the page width and it works as expected, transitioning from desktop to mobile.

    However, it is fairly tricky to extend the code to have a YouTube video stretch the width of the browser - to have any chance of success you need a responsive iframe type solution and I have found this conflicts with Scale-to-Fit-Width.

    I can only encourage you to request an MP4 copy; it is just so much easier to do what you want to achieve.

    Just look at what happens at the end of the video! YouTube dumps a collage of videos on you that it thinks the visitor might want to look at. The fantastic message and mood you spend minutes creating is entirely undone in seconds!

    The guys shot this in HD, UHD or DCI4K; it's great professional video - get the original Bill
    Attached Files Attached Files

  7. #7
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Video header help

    Slightly unrelated.

    Initially I looked at the video for technical curiosity. At the end of it I opened a new tab and donated $50 to the Queensland RSPCA.

    Full screen, small screen, upside down or sideways, the video does it's job. I now have to justify to my wife why we're eating burgers instead of steak tonight. I daren't show her the video or we'll be eating burgers all week.

  8. #8
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    994

    Default Re: Video header help

    Gary .... Almost there. I have the code through Vimeo at the moment. I’m going to be messing with this for some time.
    Bill
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  9. #9
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Video header help

    I tried twice and both times it took an abnormally long time to load and all I ever got was a purple rectangle and no video, sorry.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  10. #10
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Video header help

    That should not happen, can you post the URL where this event occurred and the device you were using Windows/Apple/Android?

    Gary

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •