Skip to main content
R
REELHERO
Inspiring
July 12, 2022
Answered

background slideshow video issues

  • July 12, 2022
  • 2 replies
  • 4377 views

hey gang -

 

trying to add fullscreen video to my slideshow-

 

https://toddheymandirector.com/index_video.html

 

please excuse the sloppy code Ive been trying all sorts of things (apologies particularly to you Osgood)

 

Two major issues.. I dont want the controls to show and i want the video to autoplay..

i added a poster frame but the vid still loads small and pops large which is jarring..

and also pops back to the poster frame before it dissolves to the next which is awful--

 

finally there is a broken image link (blank.gif) that i cant find anywhere in my code

 

ideally i want it to look like this - but fullscreen--

 

https://smugglersite.com/

 

thank you!

 

    This topic has been closed for replies.
    Correct answer osgood_

    its killer - thank you for this - how kind!

    https://toddheymandirector.com/index_video_delay.html

    when i stylize to match ill try and keep it clean like that 

    heres the current site

    https://toddheymandirector.com/

     

    could you point out where to adjust speed of fade and slide up in the script ?- i can guess but just to be sure

     

    also - ive used font awesome - i went with a bolder plus icon - maybe theres one in font awesome that matches or increase the font weight--

     

    thank you !!


    quote

     

    could you point out where to adjust speed of fade and slide up in the script ?- i can guess but just to be sure

     

    By @REELHERO

     

    Try adjusting how long the transitions take:

    transition: all 1s ease-in-out;

     

    Plus you can set the 700 to less:

    myInterval = setInterval(textAnimateFunc, 700);

     

    However there's no real 100% way, apart from keep tinkering around with the various css/javascript settings.   

    2 replies

    Liam Dilley
    Liam Dilley
    Inspiring
    July 12, 2022

    This is an example of what Nancy was refering to where video will not playing in Chrome but does in firefox and also depending on browser plugins:
    https://codepen.io/1wdtv/details/jbjZeb
    You do not need a play button or controls on videos but you got no way of playing the video in those cases.
    This is an example that works regardless:
    https://codepen.io/bradtraversy/details/BaoWWjb
    You can also have youtube and vimeo videos that auto play cross browser as well

    https://codepen.io/abennington/pen/ezaPPy

    R
    REELHEROAuthor
    Inspiring
    July 13, 2022

    thanks Liam !

    i was able to create a page from that -

    https://toddheymandirector.com/index_video2.html

    big question how do i turn that background into a slideshow- ?

    where a new vid dissolves up after 6 secs and a new caption slidesup and fades in ( i used simple css)

     

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    July 13, 2022

    Why not turn the whole slide show including the video into a background video? 

     

    Have a look at this video:

    https://youtu.be/Gx_7GQtSdpc

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 12, 2022

    Bad idea for several reasons. 

     

    1. Autoplay with audio does NOT work for the majority of browsers & web devices no matter what you do.  Autoplay will invoke on some devices but only if audio is muted.

     

    2. The rest of us have autoplay blockers in our browsers.  It saves us from intrusive websites and unwanted bandwidth consumption. 

     

    3. In the absence of player controls, most users are unaware that video exists.  They assume it's a static picture as they have no way to invoke the player.

     

    Rethink this from the user's point of view.

     

    This works for the widest range of users & devices:

    <video poster="my_poster_image.jpg" controls="controls" muted="muted" autoplay="autoplay" >
<source src="my_video.mp4" type="video/mp4">
</video>

     

    Nancy O'Shea— Product User & Community Expert
    R
    REELHEROAuthor
    Inspiring
    July 12, 2022

    thank you Nancy- as always i leaarn a ton from you 

     

    however in this case - its a showcase site -99% of the people observing expect video and will not have blockers for this reason - (im a film director after all -  theyre literally coming to see video) - IE.. the reference i sent is the most respected production company in my commercial production biz.. 

     

    https://smugglersite.com/

     

    the clips i uploaded did not have audio for the reasons you mentioned- and theyre only 6 seconds long to act as a teaser..

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices