How to transition from video to opening a new webpage after video ends?

Report · Oct 09, 2020

Hello --

In older versions of Adobe Suite products there were different ways to go about doing this but that now involves obsolete software. The newer versions of Photoshop, Dreamweaver, etc. don't seem to offer this option or I may be wrong.

I am just trying to autoplay a video fullscreen and then have a webpage launch (in the same browser) after the video finishes playing. That's all.

Suggestions?

Report · Oct 10, 2020

Are you using the video tag?

<video>

</video>

If you are then give it an id:

</video>

Then add the script below, just before the closing </body> tag, to the page which contains the video and change the href to the page which you want to go to, after the video has stopped playing.

myVideo.onended = function() {
window.location.href = 'goToMyPage.html';
}
</script>

Report · Oct 10, 2020

Much appreciated, I will give this a shot. I posted a follow up question below in this same thread.

Thank you!

Dominique

Report · Oct 10, 2020

URL forwarding has never been supported in HTML5 video. You need a script for that. Video containing an audio track cannot be autoplayed unless the MUTE attribute is invoked. And some people who detest autoplaying media have browser add-ons to kill it. For this reason, you should always have player controls just in case.

Try this:

<!doctype html>
<html lang="en">
<head>
<title>Responsive HTML5 Video with URL Forwarding</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
video {height:auto; width:100%;}
</style>
</head>

<body>
<video id="myvid" playsinline muted autoplay controls>
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<script>
//URL forwarding
video = document.getElementById('myvid');
video.addEventListener('ended',function() {alert('End of video, you will be taken to Google now.');       
window.location.href = 'https://www.google.com';})
</script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 10, 2020

Thank you very much for the responses. I figured it would have to be hand coded in script. It seems like such a simple thing and yet none of the new Adobe products like Lightroom, Portfolio or Rush seem to offer this option which is odd because if you are putting together a presentation and you want to avoid having to manually click through after playing a video clip there should be this option to better automate.

It seems the action is dependent upon time as well. Yet, even if the video clip is say 20 seconds long you can't set the timer on first page to redirect to a second webpage after 20 seconds because the video may take longer due to buffering or other loading issues. So basically it is an event that has to occur (i.e. the video finished playing) in order to trigger or execute the transition to another page.

I have a follow up question that I could use some help with if possible? I am having trouble with keeping the video responsive and getting it to resize to fit whatever screen it is being displayed in. It is 1920px by 1080px and it high definition. It keeps displaying much larger than the screen and when I resize in the web browser it does not stay centered or keep maintain cohesion with the browser window.

I am using CSS and have the following code:

index {background-color:#FFFFFF;
white-space: nowrap;}

video {
position: relative;
margins: 0px;
initial-scale: 100%;
min-width: 10%;
max-width:1000%;
z-index: 1000%;
height: auto;
overflow: auto;
user-scalable:"yes";}

body {margin:0px;
overflow: auto;
}

Media@mercycity.church all screen (max-width: 400px);{body{video:videoClip.mp4;}}
Media@mercycity.church all screen (min-width: 401px);{body{video:videoClip.mp4;}}
Media@mercycity.church all screen (min-width: 769px);{body{video:videoClip.mp4;}}

I am also using the following in the source code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>

<title>Index</title>

<link rel="stylesheet" type="text/css" href="css/video.css" id="pagesheet"/>
</head>
<body>
<container>
<sandbox>
<seamless>
<video autoplay>
<source src="videoClip.mp4" type="video/mp4">
<source src="videoClip.ogv" type="video/ogg">
<source src="videoClip.webm" type="video/webm">
Your web browser does not meet the minimum requirements to view this page.
</video>
</seamless>
</sandbox>
</container>
</body>
</html>

Report · Oct 11, 2020

Try the below css:

video {
min-width: 100%;
min-height: 100%;
position: absolute;

transform: translate(-50%, -50%);

left: 50%;
top: 50%;
}

Report · Oct 11, 2020

This is a better solution, then you won't get any ugly browser scroll bars:

video {

width: 100vw;
height: 100vh;

position: fixed;
top: 0;
left: 0;

object-fit: cover;
}

Report · Oct 11, 2020

#1 My first reply is responsive.

#2 You don't need OGG or WEBM fallbacks as ALL modern browsers natively support MP4 video.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 11, 2020

'#1 My first reply is responsive'

OP requires a 'fullscreen' video which centers horizontally, not one that just keeps its ratio.

Report · Oct 11, 2020

Just between you, me and the fence post, this is probably an exercise in futility as autoplay will not work in all devices unless accompanied by muted. And Mobile devices in particular block autoplay to prevent unwanted data consumption.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 11, 2020

I dont know whether it's futile or not. I think developers should just give up trying to satisfy every device 100%. If it auto-plays in some devices and only shows a 'cover image' in others, so be it. Personally I would reserve videos for desktop devices and replace them on mobile for something else, a static image, to lessen the download time/wasted bandwidth consumption. Videos to me are just 'eye candy' and that's ok in situations where your connection is super fast. I rarely if ever connect to the internet outside of my office environment, so would not be able to tell you what the preformance, of any website is like, regardless if it contains videos, on a slow connection. However judging by the performance of a lot of wbesites these days on a fast connection they are not likely to perform well on anything other than a fast connection. ..........too many external scripts and heavy frameworks to download, coupled with usually giant images is sure to have a detrimental effect.

Report · Oct 11, 2020

I have autoplay blocked by default as do most people these days because it's annoying. That's why there are so many autoplay blocking add-ons. So unless the media is muted or contains controls (volume, play button, etc..), I can't experience it.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 11, 2020

Well I always think videos should be 'muted', there's no question about that. Effective fullscreen short 'eye candy' videos dont really need sound to achieve impact.

Report · Oct 11, 2020

Full screen video is passe. A muted video in the header can be every bit as dramatic without taking up precious content real estate on the page.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 11, 2020

I don't agree, full screen creates a more sophisticated and dramatic solution, just as a full page image in a publication, with a bit of overlaying text, does. But dont let me inform you of that - I've only been in visual communications for over 40 years.

Report · Oct 12, 2020

I'm no freshman either.

In the pre-Covid days, everyone wanted full screen videos. But now, not so much.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 12, 2020

What does Covid have to do with making the decision of whether or not to use a fullscreen background video? I'm not aware that videos spread the Covid virus?

I tell you something though, you could be onto something - since Covid the whole worlds become slightly more crazy, including Adobe and their non-sensical decision making.

It's ******* hilarious, sitting back and watching it unfold, quite entertaining really.

Report · Oct 12, 2020

The way we think about things has shifted since Covid. If someone had told me 8 months ago that the next hot trends would be designer face masks, friend/family "parties" over Zoom, and streaming on a small screen instead of the "movie theater" experience, I would have said "you're nuts!" But there you have our new world.

Stock video houses & full feature movie trailers don't consume the full screen. Unless you're the next Cecil B. DeMill, your video commercial doesn't deserve full screen status either. The site owner who thinks it does is just being pretentious and gaudy.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 12, 2020

Now I know you've been affected........I really don't have a clue why you are associating Covid with web-development at all, unless mad-man Trump has mandatory issued instrutions that web-developers must NOT under any circumstances deploy full background videos, I dont follow US politics that much.

They can be used to good effect, many examples can be found if you search for then. The below are just a few - personally I think they rather bring something to the party in terms of being evocative and impactful - as they say 'a picture is worth a thousand words', so a video must be worth a lot more.

https://www.bluhomes.com/

Almost full screen:

https://www.storyandheart.com/

https://www.couleecreative.com/

https://cobblehilldigital.com/

Report · Oct 12, 2020

You've actually proved my point. 99% of the time, a dramatic presentation can be achieved with a muted header video (as in your last 4 examples). Your 1st example is taking an SEO hit. They could have easily added some real content below the fold. Now they must lavishly toss cash at Google & Bing ads to make up for it. Most small site owners don't have deep pockets like that. Every bit of real estate on the home page is precious.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 12, 2020

What do you think I've been talking about in this thread - exactly the kind of videos shown in my examples, which you now seem to agree can provide a dramatic presentation. I'm sure if the dramatic presentation sells the product they can toss some money at SEO, even some of the small companies I work for do that. It's swings and roundabouts - either bore users s**tless or do something which just might be beneficial and make you stand out from your competitors. What is precious is catching the eye of the audience you need to and you arent going to do that with a boring website containing a lot of text on page load or pretty dull static images, even slideshows are past their sell-by-date BUT we all use them because we generally arent creative enough to deploy anything else or the money is not available to do so, if it were or we were working for a good creative company with better clients we would.

Report · Oct 12, 2020

My first example is what I'm talking about -- full width header video, not full screen.

A muted video in the header

And because the page contains plenty of descriptive content, there is no SEO penalty.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 13, 2020

Well that is exactly what I was talking about (full-screen to me, regardless of if its in a 'header' or not, whatever that is these days, a 'header' could be in the footer) but you somehow went off tangent and started talking about Covid and face-masks, zoom etc.........hummmm. Any way we have now established a video 'full-screen/header' could have benefits.

Report · Oct 13, 2020

Replying to the post below (duplicated because this darn forum dosesn't always exactly put the reply post where it needs to be!

'My first example is what I'm talking about -- full width header video, not full screen.

A muted video in the header

And because the page contains plenty of descriptive content, there is no SEO penalty.'

Well that is exactly what I was talking about (full-screen to me, regardless of if its in a 'header' or not, whatever that is these days, a 'header' could be in the footer) but you somehow went off tangent and started talking about Covid and face-masks, zoom etc.........hummmm. Any way we have now established a video 'full-screen/header' could have benefits.

Report · Oct 12, 2020

The link to cobblehilldigital.com is nice, that is very similar to what I am trying to go for. I was thinking that maybe I need to put the video in the background. Maybe I should give that a shot? There's a weird invisible <div></div> that is showing up when I review the page in Dreamweaver Live mode and it stretches way off into infinity towards the right. The outline of the box is gray, but the <div> does not actually exist in my code. So perhaps I put the video in the background and anchor it? Although the video that is playing in the background on CobbleHillDigital is in the <body> and in a <div class> as follows:

Again, thank you both very much for the tips!

Dominique

Adobe Community

How to transition from video to opening a new webpage after video ends?

1 Correct answer