cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Embed Video Code Into Page and Link To Button

HammyTheHumanTool
Explorer ,
Dec 02, 2016 Dec 02, 2016

I have the following embed code for my video:

<div style='position:relative;height:0;padding-bottom:56.25%'><iframe class='sproutvideo-player' src='//videos.sproutvideo.com/embed/7c9bd1bf1a1be5c6f4/93513b1bbf6264dc?playerTheme=dark& amp;playerColor=' style='position:absolute;width:100%;height:100%;left:0;top:0' frameborder='0' allowfullscreen></iframe></div>

I have a Bootstrap button on my web page which, by clicking on it, I want to call the aforementioned code/link/whatever-the-right-term-is and watch the video.

How do I do this?  Where do I embed this code?  How do I point/link to it?

Thanks

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

correct answers 1 Correct answer

Nancy OShea Community Expert
Community Expert , Dec 02, 2016 Dec 02, 2016

Responsive Video example:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

.center-block {float:none}

</style>

</head>

<

...
Translate
replies 2 Replies 2
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
Dec 02, 2016 Dec 02, 2016

Responsive Video example:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

.center-block {float:none}

</style>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm-10 center-block">

<button type="button" class="btn btn-lg btn-danger" data-toggle="collapse" data-target="#myVideo">CLICK FOR VIDEO</button>

<div class="collapse" id="myVideo">

<h2>Responsive 16:9 Aspect Ratio (YouTube video)</h2>

<div class="embed-responsive embed-responsive-16by9">

<!--EMBED YOUR VIDEO HERE-->

<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>

</div>

</div>

<!--end col--></div>

<!--end row--></div>

<!--end container--></div>

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
HammyTheHumanTool
Explorer ,
Dec 06, 2016 Dec 06, 2016
LATEST
In Response To Nancy OShea

Thanks very much.  This, fundamentally, worked very well.  As with anything, a little massage work and voila!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices