• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Creating links to display videos in an iframe

New Here ,
Jun 06, 2022 Jun 06, 2022

Copy link to clipboard

Copied

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>

<li> <a href=""> page 1</a> </li>

<li> <a href="">  page 2</a> </li>

<li> <a href="">  page 3</a> </li>

</ul>

 

Can I use a similar approach to link videos?

 

Sincerely,

 

Views

111

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
community guidelines

correct answers 2 Correct answers

Community Expert , Jun 06, 2022 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.

 

image.png

 

<!doctype html>
<html lang="en">
<head>
...

Votes

Translate

Translate
LEGEND , Jun 07, 2022 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%;
...

Votes

Translate

Translate
Community Expert ,
Jun 06, 2022 Jun 06, 2022

Copy link to clipboard

Copied

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.

 

image.png

 

<!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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

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

Votes

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
community guidelines
LEGEND ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

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>

 

 

 

Votes

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
community guidelines
New Here ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

LATEST

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

 

 

Votes

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
community guidelines