Skip to main content
Known Participant
June 6, 2022
Answered

Creating links to display videos in an iframe

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

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

 

    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>

     

     

     

    2 replies

    osgood_Correct answer
    Legend
    June 7, 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>

     

     

     

    grcutzAuthor
    Known Participant
    June 7, 2022

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

     

     

    Nancy OShea
    Community Expert
    Community Expert
    June 7, 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
    grcutzAuthor
    Known Participant
    June 7, 2022

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