Creating links to display videos in an iframe

Report · Jun 06, 2022

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,

Report · Jun 06, 2022

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 & Moderator

Report · Jun 07, 2022

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

Report · Jun 07, 2022

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>

Report · Jun 07, 2022

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

Creating links to display videos in an iframe

2 Correct answers