I have a responsive embedded Vimeo video wrapped in a link. But the link doesn't work or show cursor on hover. Any ideas why?
.container {
position: relative;
margin-bottom: 20px;
max-width: 1000px;
}
.container a{
display: block;
cursor: pointer;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src='https://player.vimeo.com/api/player.js' id='vimeo-js'></script>
<div class="container">
<a href="https://www.google.com/">
<div class="embed-container">
<div id="home-feat-player-item1" data-vimeo-initialized="true">
<iframe src="https://player.vimeo.com/video/622416001?h=1e51090569&title=0&byline=0&muted=1&controls=0&app_id=122963" width="640" height="360"></iframe>
</div>
</div>
</a>
</div>
What am i missing here?
I don't understand the problem however by setting the code like this, it works.
<div style="padding:75% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/622416001?h=1e51090569&badge=0&autopause=0&player_id=0&app_id=122963"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
style="position:absolute;top:0;left:0;width:100%;height:100%;" >
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
Related
I made this iframe so I could put the TV border over the video player, and so far I've been trying to make it look good on mobile, so far it looks good on PC browsers (jsbin displays it weird, but in the actual site it looks good), but I don't get the height of the video to fit.
<html>
<style>
iframe {
position: absolute;
z-index: -1;
left: 12%;
top: 34%;
width: 60%;
}
#TVborder {
position: absolute;
float: center;
z-index: 0;
left: 0px;
width: 100%;
pointer-events: none;
}
</style>
</head>
<body>
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" />
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Id3tNsMj_hA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
What do you think would be the best approach to fix it?
I fixed it by adding a container around the iframe and tweaking that a bit, here's how the code went out:
<html>
<style>
iframe {
position: absolute;
z-index: -1;
width: 100%;
}
#TVborder {
position: absolute;
float: center;
z-index: 0;
left: 0px;
width: 100%;
pointer-events: none;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0%;
height: 0;
overflow: hidden;
}
.embed-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="embed-container">
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" />
<iframe src="https://player.vimeo.com/video/622576121?h=92d4a4e5c6&autoplay=1&title=0&byline=0&portrait=0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:20%;left:9%;width:66%;height:79%;" frameborder="0"></iframe>
</div>
</body>
</html>
Im trying to embed a youtube live video window and live chat to appear next to eachother like they do on youtube live. Right now the chat appear below the video window, and im stuck with how to align this code:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class='embed-container'>
<iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>
Im trying to embed a youtube live video window and live chat to appear next to each other
According to your wording, I am guessing that you what the video and chat to be side-by-side.
The shortest solution personally I can come out of is using Flexbox while your HTML code remains the same.
body{
display: flex;
flex-direction: row;
}
.embed-container{
flex: 0 0 50%;
}
iframe{
width: 100%;
}
<div class="embed-container">
<iframe src='https://www.youtube.com/embed/VIDEOID' frameborder='0' allowfullscreen></iframe>
</div>
<div class='embed-container'>
<iframe src='https://www.youtube.com/live_chat?v=VIDEOID&embed_domain=www.mydomain.com' frameborder='0' allowfullscreen></iframe>
</div>
HTML:
<div class="video">
<iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
CSS:
.video {
width: 100%;
height: 200px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JSFIDDLE: http://jsfiddle.net/pj2utq4v/
QUESTION: How to force iframe to be 100% of parent div width. Since parent div is only 200px in height, iframe video would be cropped which is also okay with me.
You can do this changing your CSS classes a little bit:
.video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JSFIDDLE: http://jsfiddle.net/pj2utq4v/1
Added one more div with overflow hidden and fixed height and it works.
<div style="height: 200px; overflow: hidden">
<div class="video">
<iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<style>
.video {
width: 100%;
height: 200px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
http://jsfiddle.net/pj2utq4v/
Is there a reason you want to use iframes? I would try using HTML5 video tag. Here's an example: https://www.w3schools.com/html/html5_video.asp then set your video width to 100% like this:
<video width="100%" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I am trying to make a 3x3 layout style of videos on my website. I have them responsive but I can't figure out how the middle can be centered in between the left and right video and how to put space in between them. Also, I want some margin on the right and left so they don't hit the border of the webpage. Here is the HTML and CSS:
HTML:
<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
.video {
position: relative;
padding-bottom: 56.25%;
}
.video iframe {
position: absolute;
width: 100%;
height: 100%;
}
.video-layout {
max-width: 500px;
border: 1px solid green;
}
#vid-left {
margin-left: 25px;
float: left;
}
#vid-mid {
}
#vid-right {
float: right;
}
Here is my attempt at this: https://jsfiddle.net/w1mmLz4h/
CSS:
.video {
position: relative;
padding-bottom: 56.25%;
}
.video iframe {
width: 100%;
height: 100%;
}
.video-layout {
max-width: 500px;
border: 1px solid green;
}
#vid-left {
float: left;
padding:5px;
width:33%;
box-sizing:border-box;
}
#vid-mid {
float: left;
padding:5px;
width:33%;
box-sizing:border-box;
}
#vid-right {
float: left;
padding:5px;
width:33%;
box-sizing:border-box;
}
HTML:
<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Used OP's classic responsive video rules then scaled everything roughly at 30%.
Used flexbox to keep an equal amount of space between each video and the screen's edges.
Applied the defaults I use normally.
It's very responsive, shrink it, enlarge it, call it bad names it just keeps chugging along. All it needs is a simple media query to make it stack vertically when displayed on a phone/tablet portrait oriented....
.... Ok I added a media query for mobile portrait orientation. When testing it, go to dev tools and use the phone emulator, or better yet look at this in a phone ;-)
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35761650</title>
<style>
html {
box-sizing: border-box;
font: 500 16px/1.428'Raleway';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: black;
color: yellow;
}
.video {
position: relative;
padding-bottom: 56.25%;
height: 16vh;
width: 30vw;
}
.video iframe {
position: absolute;
width: 100%;
height: 56.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.videoFrame {
position: relative;
display: flex;
flex-flow: row nowrap;
width: 100vw;
border: 1px solid green;
height: 100vh;
overflow-y: hidden;
overflow-x: scroll;
justify-content: space-around;
margin: 0 auto;
padding: 12vh 0;
}
#media screen and (max-device-width: 768px) {
.videoFrame {
flex-flow: column nowrap;
overflow-y: scroll;
overflow-x: hidden;
align-items: center;
margin: 0 auto;
padding: 0;
}
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
width: 100vw;
}
.video iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
}
</style>
</head>
<body>
<div class="videoFrame">
<div class="video">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
With this embed code, all your worries will be solved.
If you have uploaded videos to YouTube or other sites.
First, embed them and copy the code they provided.
Then place the embed code of your first video instad the line that says "Place your video code here" in my code.
Then place the code for your second video next to the same line in the other section of my code.
Putting the URL of the video directly will not work.
Ones Your video code are added to my code.
Copy and paste everything into a section of your site where you can embed the codes.
That will place your videos side by side.
Dont forget to adjust the video sizes in my code to fit the size of videod you want.
<iframe width="128" height="72"
place your embed video code here
<iframe width="128" height="72"
place your embed video code here
Below is my code, i am trying to center an iframe , but its always going to left !Here is fiddle http://jsfiddle.net/4yL4od8j/
.videowrapper {
text-align : center;
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 700px;
max-height: 400px;
}
my html
<center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>
To make you frame center you need to give your videowrapper a specific width and make the margin left and right as auto.
.videowrapper {
float: none;
clear: both;
width: 700px;<-- Added-->
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
margin: 0 auto;<-- Added-->
max-width: 100%;<-- Added-->
}
Working fiddle
Despite you wanna make your frame responsive always use max-width: 100% to your videowrapper.
without css solution. iframe can align itself in the text paragraph, so put it in empty paragraph with text-align:center
<p style="text-align:center;">
<iframe width="420" height="315" align="middle"
src="https://www.youtube.com/embed/YOURVIDEO?controls=0" allowFullScreen>
</iframe>
</p>
Try this:
<div align="center">
<div class="videowrapper "><iframe width="560" height="315" src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div>
</div>