Creating links to display videos in an iframe

Forum|Forum|3 years ago
June 6, 2022
2 replies
349 views

I have a project where several pages are displayed in an iframe. All these pages are HTML and I don't have a problem creating links to display them in the same iframe. However, the project includes videos, which I don't know how to create a link (like I did for the HTML pages) to display them in the same iframe.

Here is the structure of my list:

<ul>

</ul>

Can I use a similar approach to link videos?

Sincerely,

This topic has been closed for replies.

Correct answer osgood_

I think what you are requesting is something like the below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video display in iframe</title>
<style>
.video-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height: 0;
width:	80%;
margin:	0 auto 25px auto;
}
@media screen and (max-width: 768px) {
.video-responsive {
width: 95%;
}
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.videoLinks {
width:	50%;
margin:	0 auto;
text-align: center;
}
.videoLinks a {
text-decoration: none;
display: block;
margin:	0 0 10px 0;
background-color: #000;
padding: 15px;
color: #fff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="video-responsive">
<iframe class="videoContainer" src="https://www.youtube.com/embed/korRfKTDoxE" frameborder="0" allowfullscreen></iframe>
</div>

<div class="videoLinks">
<a href="#" data-url="https://www.youtube.com/embed/korRfKTDoxE">LearnWebCode</a>
<a href="#" data-url="https://www.youtube.com/embed/XPrx-j5L_wo">dcode</a>
<a href="#" data-url="https://www.youtube.com/embed/lLWfZL-Y8lM">Dave Gray</a>
</div>

<script>
const videoContainer = document.querySelector('.videoContainer');
const videoLinks = document.querySelectorAll('.videoLinks a');
videoLinks.forEach((videoLink) => {
videoLink.onclick = function(e) {
e.preventDefault();
let videoUrl = this.getAttribute('data-url')
videoContainer.src=videoUrl;
}
});

</script>
</body>
</html>

O

osgood_Correct answer

Legend

I think what you are requesting is something like the below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video display in iframe</title>
<style>
.video-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height: 0;
width:	80%;
margin:	0 auto 25px auto;
}
@media screen and (max-width: 768px) {
.video-responsive {
width: 95%;
}
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.videoLinks {
width:	50%;
margin:	0 auto;
text-align: center;
}
.videoLinks a {
text-decoration: none;
display: block;
margin:	0 0 10px 0;
background-color: #000;
padding: 15px;
color: #fff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="video-responsive">
<iframe class="videoContainer" src="https://www.youtube.com/embed/korRfKTDoxE" frameborder="0" allowfullscreen></iframe>
</div>

<div class="videoLinks">
<a href="#" data-url="https://www.youtube.com/embed/korRfKTDoxE">LearnWebCode</a>
<a href="#" data-url="https://www.youtube.com/embed/XPrx-j5L_wo">dcode</a>
<a href="#" data-url="https://www.youtube.com/embed/lLWfZL-Y8lM">Dave Gray</a>
</div>

<script>
const videoContainer = document.querySelector('.videoContainer');
const videoLinks = document.querySelectorAll('.videoLinks a');
videoLinks.forEach((videoLink) => {
videoLink.onclick = function(e) {
e.preventDefault();
let videoUrl = this.getAttribute('data-url')
videoContainer.src=videoUrl;
}
});

</script>
</body>
</html>

G

grcutzAuthor

Known Participant

Thank you! I'll try this option which seems more suitable to my request.

Nancy OShea

Community Expert

Why would you want to? 99% of websites DO NOT NEED <iframes>. Besides, <iframes> are so messy and problematic. <iframes> are for special situations like Google Maps or YouTube videos. But otherwise, you don't want any part of them.

All you need is a responsive layout and the HTML5 <video> tag with an MP4 video file. MP4 is supported by all browsers & mobiles devices.

This example is built with Bootstrap 4.5 which is supported by DW CC 2021.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video ~ version 4.5.2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS on CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<!--Search form-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="jumbotron mx-auto">
<h2>Bootstrap 4.5.2</h2>
<p>Responsive video. This uses YouTube 
&lt;iframe&gt; 
but MP4 will work, too.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<!--INSERT YOUR VIDEO HERE-->
<video poster="YOUR_POSTER_IMAGE.jpg" controls="controls" >
<source src="YOUR_VIDEO.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col">
<footer>Footer goes here.... </footer>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

G

grcutzAuthor

Known Participant

Thank you. I'll try your suggestion and see if it works for me.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded