Highlighted

Can you apply hyperlink to video?

Explorer ,
May 27, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

335

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Can you apply hyperlink to video?

Explorer ,
May 27, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

336

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 27, 2018 0
Adobe Community Professional ,
May 27, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2018 1
Explorer ,
May 29, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
LEGEND ,
May 27, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2018 1
Adobe Community Professional ,
May 27, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2018 1
Explorer ,
May 29, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
Adobe Community Professional ,
May 29, 2018

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 2
Explorer ,
May 29, 2018

Copy link to clipboard

Copied

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

Thank you for the good news.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
Adobe Community Professional ,
May 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
Explorer ,
May 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
Adobe Community Professional ,
May 29, 2018

Copy link to clipboard

Copied

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

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 1
Explorer ,
May 29, 2018

Copy link to clipboard

Copied

Merci encore, et profitez de la pizza.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
Adobe Community Professional ,
May 29, 2018

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0
Adobe Community Professional ,
May 29, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2018 0