Skip to main content
A
akamookee
Participating Frequently
February 7, 2017
Answered

a video in fullscreen/autoplay/autoforwarding between two sites

  • February 7, 2017
  • 3 replies
  • 1952 views

hi

tricky thing.

i have a videofile of lets say 5mb in full hd , 5 seconds long, muted

then i have the "home" site and another site withing my homepage (...yeah, what else:)

so, now i want to go from my home site to the other site of my homepage following the link to the other site (...still, what else:)

and now it gets tricky: instead of going directly from home site to this other site i want the videofile to be played automaticly + in fullscreen + automaticly forwarding to the other site i wantet to go to from home in the first place.

like instead of : home -> link to other site -> other site

i want : home -> link to other site -> videofile in fullscreen +  autoplaying for 5 seconds (or whatever long the video will be) + automatically directing to -> other site

cant be so difficult i would assume

and as its redirecting to a subside of the homepage withing the same domain and not to an entirely different domain i hope/think it wont be a problem with the redirectionblocker if the browser.?

so as i see it, it basicaly comes to:

creating a site where nothing elese happens than a videofile is being played in fullscreen, without any buttons, muted, some seconds long

and then creating the redirection cheat between the home site, the video site, and the target site

but i am new to webdesign, and dont no too much about it and totaly be open for how its done as long as the effect is exactly the same

please help, would be very cool

    This topic has been closed for replies.
    Correct answer Jon Fritz

    There are some major problems with what you want to do...

    1. Autoplay doesn't work in most mobile devices, so the video wouldn't do anything for those users
    2. ...without controls, mobile viewers wouldn't be able to get the video to play and the redirect would never fire
    3. Full screen video playback is a viewer-controlled option. We can have a video play as the background of a web page (see #1 and 2 for issues on mobile) but we can't force a viewer into the actual Full Screen Mode where the browser chrome is hidden

    4. Redirecting after the video is done playing, to another page of your website could easily be handled by javascript...

    <script>

    var vid = document.getElementById("your-video-id-here");

    vid.onended = function() {

        window.location = "http://www.your_domain_name_here.com/the_page.html";

    };

    </script>

    3 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    February 7, 2017

    There are some major problems with what you want to do...

    1. Autoplay doesn't work in most mobile devices, so the video wouldn't do anything for those users
    2. ...without controls, mobile viewers wouldn't be able to get the video to play and the redirect would never fire
    3. Full screen video playback is a viewer-controlled option. We can have a video play as the background of a web page (see #1 and 2 for issues on mobile) but we can't force a viewer into the actual Full Screen Mode where the browser chrome is hidden

    4. Redirecting after the video is done playing, to another page of your website could easily be handled by javascript...

    <script>

    var vid = document.getElementById("your-video-id-here");

    vid.onended = function() {

        window.location = "http://www.your_domain_name_here.com/the_page.html";

    };

    </script>

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 7, 2017

    I would host the video on YouTube. Then using the following code it will play automatically in full screen

    <iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>

    and the jQuery script

    $(function(){
      $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

      // If you want to keep full screen on window resize
      $(window).resize(function(){
      $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
      });
    });

    If you put this in the head section of your document, it will redirect after 3secs

    <meta http-equiv="refresh" content="3;url=http://www.google.com/" />

    Change the 3 to suit and the URL to the page that you want to redirect to.

    Don't forget to include the jQuery library.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 7, 2017

    Forgot to say, please remind me to never go to your site, I hate things happening without my input/knowledge.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    A
    akamookeeAuthor
    Participating Frequently
    February 7, 2017

    )

    its just 5 seconds or less

    pziecina
    pziecina
    Legend
    February 7, 2017

    akamookee wrote:

    hi

    tricky thing.

    and now it gets tricky: instead of going directly from home site to this other site i want the videofile to be played automaticly + in fullscreen + automaticly forwarding to the other site i wantet to go to from home in the first place.

    You can have a video autostart, and at the full size of the browser window, simply create your video with the dimensions set at 100% and the autoplay set in the video attributes, (video quality may suffer if not created to the correct size).

    You cannot have the video set to play at the fullscreen size of the users device, (monitor/display) you also cannot transfer the playing from one page/site to another, as leaving the page effectively ends the session. You can set the position to resume playing by using javascript, but this is within the site, not two separate sites. You would also have to wait on the second page for the video to load to that position, so it would not be instantaneous.

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