Can you apply hyperlink to video?

Report · May 27, 2018

Greetings,

I have a page with four video files. Ultimately I'd like to add a frame (i.e. picture frame) around each of these, and the area

within that frame will be hyperlinked. My search to find the solution to this has been unfruitful. I've talked with one person

who says that if you watch this on a phone, and turn it sideways all the hyperlinks will be stacked, instead of in

their designated positions (horizontally across the screen). I sure would be grateful for any suggestions.

Report · May 27, 2018

A hyperlink reacts to a mouse/touch event. If you want to start the video with a mouse/touch event and you have a hyperlink as well, I think that the browser will get confused.

Wappler, the only real Dreamweaver alternative.

Report · May 29, 2018

Ben, thank you for the reply. I, in my naiveté, had been under the impression that a page comprised of a video file could play automatically when the page was loaded. In my case four videos. Someday I suspect this may work as I'd hoped.

Report · May 27, 2018

Another item to remember is that most smartphones now, do not autoplay videos, and start any video playback, (when selected) by opening a new browser tab in which to play the video.

Report · May 27, 2018

If your layout is responsive for all devices, as it should be, vertically stacked would be expected on mobile devices. I don't understand the problem.

Below a Bootstrap 4 layout: 4 across on desktop, 2 across on tablet, vertically sacked on mobile.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 with Flexbox</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
body { min-height: 100vh; padding-top:25vh;}
.flex-grow { flex: 1; }
</style>
</head>
<body class="d-flex flex-column">
<!--responsive navbar-->
<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center fixed-top"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resum&eacute;</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="container flex-grow">
<div class="row">
<div class="col">
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos, distinctio.</p>
</div>
</div>
<div class="row text-center">
<div class="col-sm-6 col-md-3 border border-primary"><a href="#">
<img class="img-thumbnail" src="https://dummyimage.com/400x300">
VIDEO 1</a>
</div>
<div class="col-sm-6 col-md-3 border border-primary"><a href="#">
<img class="img-thumbnail" src="https://dummyimage.com/400x300">
VIDEO 2 </a>
</div>
<div class="col-sm-6 col-md-3 border border-primary"><a href="#">
<img class="img-thumbnail" src="https://dummyimage.com/400x300">
VIDEO 3 </a>
</div>
<div class="col-sm-6 col-md-3 border border-primary"><a href="#">
<img class="img-thumbnail" src="https://dummyimage.com/400x300">
VIDEO 4 </a>
</div>
</div>
</div>
<footer class="bg-dark text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-4 text-center">
<h5>Footer Column 1</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 2</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 3</h5>
</div>
</div>
<div class="row">
<div class="col-md-6">
<small>Footer remains at page bottom on short pages.</small></div>
<div class="col-md-3"></div>
<div class="col-md-3 text-right small align-self-end"><small>©2018 XYZ Company</small></div>
</div>
</div>
</footer>
<!--latest jQuery Core--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Popper JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<!--latest Bootstrap 4 JS--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

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

Report · May 29, 2018

Nancy, I'm grateful for you providing the example. Fortunately I know someone who has a much better grasp of this who can decipher the code. Should it help, and I'm not asking more than what Dreamweaver can deliver, ultimately the page I'd like to create would look like this

SaMS gallery - YouTube

sans the numbers, which I placed as a reference for someone to indicate which page these would by hyperlinked to. My dream is to when the page loads the videos play automatically, and are hyperlinked, plus able to maintain their position on a phone when turned sideways. Something tells me I may really be dreaming.

Report · May 29, 2018

nope you're not dreaming, it is dooable. since HTML5 there are what we call HTML5 api, and from there most of what you describe can be easly handle in pure JavaScript and workable in all modern browser

it seams that you're french, am I right ?

Report · May 29, 2018

No monsieur/madame. Did you think I was French on account of my "naiveté"?

Thank you for the good news.

Report · May 29, 2018

nope but about the accent that you use on the word naiveté

Report · May 29, 2018

Indeed. Do you have any examples of code using HTML5.api and the Java script as you described relative to my objective?

Report · May 29, 2018

this material is pretty old, and basicaly in french but it should help you

The video API https://translate.google.fr/translate?sl=fr&tl=en&js=y&prev=_t&hl=fr&ie=UTF-8&u=http%3A%2F%2Fwww.puc...
Control a video using Javascript - https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.pu...
Using video cue point https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.pu...
Videos subtitles https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.pu...

please don't hesitate if you need further details or piece of code... but today... it's time for me to get out of computing... pizza time... the wood oven is stuffed with embers... just put the pizzas in the oven... and open a nice fresh rosé wine...

Report · May 29, 2018

Merci encore, et profitez de la pizza.

Report · May 29, 2018

je savais bien qu’il y avait du français.. la dessous... allé avant que cela crame je fonce

Report · May 29, 2018

I just realise that using the translator makes JavaScript not fully working... so you can get the original on taht one

Utiliser des points de repère en vidéo – Puce et Média (for the one about cue point)... the right pink information change class name (top, bottom, ... and so on) when hearing video cue point

in a general way, you will find every thing about video (in french) here

http://www.puce-et-media.com/tag/video/

Adobe Community

Can you apply hyperlink to video?

1 Correct answer