Welcome!
By registering with us, you'll be able to discuss, share and private message with other members of our community.
-
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.
JavaScript Iframe playlist
- Thread starter Adjehss
- Start date
ivan.moony
Bronze Coder
Iframe accepts outer HTML file name as src attribute. You put into that HTML whatever you want, including a list of whatever.
Hi there,
Welcome to Code Forum!
Something I would like to point out is to think of an iframe like a window. A window where you are looking into something. When you set up an iframe you are looking into another webpage or document without leaving the page you are on. Now you're trying to load a playlist of music and videos, could you provide more info on how you want to do this and the source?
Welcome to Code Forum!
Something I would like to point out is to think of an iframe like a window. A window where you are looking into something. When you set up an iframe you are looking into another webpage or document without leaving the page you are on. Now you're trying to load a playlist of music and videos, could you provide more info on how you want to do this and the source?
Adjehss
Coder
ok does not help me much cant still find examples on google do you know af any help on this subjcect on the net
Thomasss
Active Coder
I think I’m a bit confused still. You say you want to load a playlist - where is said playlist hosted? Is this through Spotify or YouTube? Or is it on your local host? Knowing where the playlist you want to embed is located will help us get you the right code! 
Adjehss
Coder
the playlist would be located at localhostI think I’m a bit confused still. You say you want to load a playlist - where is said playlist hosted? Is this through Spotify or YouTube? Or is it on your local host? Knowing where the playlist you want to embed is located will help us get you the right code!
Adjehss
Coder
not what im trying im trying to embed both youtube embed urls and soundcloud embed urls for examble with a playlist i create
Are you looking for something similar to this?
Embed videos & playlists - YouTube Help
You can add a YouTube video or playlist to a website or blog by embedding it. If you are an educator, get in touch with your Educational Technology platform for info on how to embed YouTube content f
support.google.com
LTomy
Gold Coder
Yeah, if it is only from one source, it is not too hard. I was talking about a playlist with content from different sources (Not only Youtube).
Ahh, that may be a little difficult then. But I'll see what I can find.
lakhanpal.saurabh
New Coder
Here is how I embedded a playlist in my portfolio. Customized, Reactive, floating, mediaplayerish !
HTML:
<div id="someclass"style="background-color:green;">
<div class="right">
<p style="transform:rotate(-90deg)";> My Spotify for you !</p>
<iframe id="someclass" class="iframe" src="https://open.spotify.com/embed/playlist/7EIydZXAW077eagV2Lw8u8?
utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" autoplay="autoplay">
</iframe>
</div>
</div>
<style>
.iframe {
opacity:0;
}
#someclass:hover .iframe:hover {
opacity:1;
}
#someclass {
border-radius: 25px 0px 0px 25px;
height: 380px;
width: 25px;
top: 20% !important;
right: 0 !important;
float: right;
position: fixed !important;
transition: width .7s ease-in-out;
-webkit-transition: width .7s ease-in-out;
overflow: hidden;
z-index: 100 !important;
color: #ffffff;
font-weight:500;
}
#someclass .right {
float: right;
width: 25px;
height: 380px;
position: relative;
z-index: 10;
top:68%;
white-space: nowrap;
}
#someclass:hover {
border-radius: 25px 0px 0px 25px;
height: 380px;
width: 380px;
top: 20% !important;
right: 0 !important;
float: left;
position: fixed !important;
transition: width .7s ease-in-out;
-webkit-transition: width .7s ease-in-out;
overflow: hidden;
z-index: 100 !important;
font-size:0px;
background:#000000;
box-shadow: 0 0 3px green;
}
</style>
