Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How To Nest Embedded Video and Audio In DIV?

D

ds_tx

Coder
I'm trying to figure out how to nest embedded YouTube Video and Audio in DIV so I can enter caption beneath them.
See - Test page

I have tried moving captions around, surrounding Audio and Video players with DIVs in different ways so that caption is contained below players, but nothing works.

Audio caption will only display where it is shown located below otherwise it breaks DIV and stretches it to full width with caption to the side.
Audio caption is fine, but I'd like it below the audio player not above.

Video caption never displays no matter what the configuration.

Audio — Uses Amit Agarwal's code from labnol How to Embed YouTube as an Audio Player
Code: 
<div class="box right" style="height:150px; width:100px"><html><script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
<div class="right aud margin-l margin-t margin-b" data-video="90WD_ats6eE" data-autoplay="0" data-loop="1" id="youtube-audio"><a href="https://www.youtube.com/watch?v=90WD_ats6eE">The Times They Are A-Changin'</a> - Bob Dylan</div></html></div>

Video — Uses W3Schools method and YouTube embed video URL copied from Settings gear icon for video
Code: 
<html><iframe class="left vid margin-r margin-t" width="250" height="140.6" src="https://www.youtube.com/embed/FMTAVDUfEe4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen >Former CIA Operative Robert Baer | JCCSF</iframe></html>

HTML —
Code: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="test.css">
    <script src="script.js"></script>
  </head>
  <body>
<div class="col left1">

<html><script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
<div class="aud right margin-l margin-t margin-b" data-video="90WD_ats6eE" data-autoplay="0" data-loop="1" id="youtube-audio"><a href="https://www.youtube.com/watch?v=90WD_ats6eE">The Times They Are A-Changin'</a> - Bob Dylan</div>
</html>

<html><iframe class="left vid margin-r margin-t" width="250" height="140.6" src="https://www.youtube.com/embed/FMTAVDUfEe4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen >Former CIA Operative Robert Baer | JCCSF</iframe></html>

</div>
</body>
</html>

CSS —
Code: 
.col { text-align: left; padding: 10px; margin-bottom: 5px; }

.left1 { width: 76%; background-color: #f5fafe; margin-right: 5px; border: 1px solid #cedff1; }

aud { height: auto; width: 128px; font-size: 0.85em; line-height: 115%; padding: 5px; border: 1px solid #aaa; }

.right { float: right; }

.aud.margin-t { margin-top: 7px; }
.aud.margin-b { margin-bottom: 7px; }
.aud.margin-l { margin-left: 10px; }

.vid { font-size: 0.85em; line-height: 115%; padding: 5px; border: 1px solid #aaa; }

.vid.margin-t { margin-top: 7px; }
.vid.margin-r { margin-right: 10px; }
Click to expand...
 
Sort by date Sort by votes
Why do you have html tag in there 3 times? All the contents should be within the same html tag. Also, all scripts go just before the closing </body> tag, in the order that you want them executed (yes, it matters). You had a typo in your frameborder properties as well.

You could try using heading tags as shown below to show your captions, just remember to place them on a new line.

Check out https://www.w3schools.com/html/html5_video.asp for a better understanding of adding a video with an external source.

Your code should look more like this:


HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="test.css">
    
  </head>
  <body>
    <div class="col left1">


    <div class="aud right margin-l margin-t margin-b" data-video="90WD_ats6eE" data-autoplay="0" data-loop="1" id="youtube-audio">
 
    <br>
    <h2><a href="https://www.youtube.com/watch?v=90WD_ats6eE">The Times They Are A-Changin'</a>- Bob Dylan</h2>
</div>

    <video class="left vid margin-r margin-t" width="250" height="140.6" src="https://www.youtube.com/embed/FMTAVDUfEe4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"; allowfullscreen ></video>
    <br>
    <h2>Former CIA Operative Robert Baer | JCCSF</h2>


    </div>
      <script src="script.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
</body>
</html>

I did not try to run this code, primarily because I know the CSS properties will be incorrect after making those changes. But give this a go, maybe do some more research on adding the video tag and how to add a caption to it as well.

Hope this helps!
 
Upvote 0 Downvote
I've already seen the HTML Video article and tried video tags with no luck.
As you can see here, the caption breaks the video div and overflows to the right - TEST PAGE

It also prevents the div class="col left1" from expanding in height to contain all elements.

The extra HTML tags come from MediaWiki, where I have to isolate HTML items from MediaWiki markdown, otherwise MW markdown doesn't work.

I think I've found a solution for video, but would still like to get caption for YouTube audio to move beneath play button so it's not on top of it.

Any ideas?
 
Last edited:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom