How can I remove this black area and set the video width and height as 100%?
Here is what I have tried so far
<iframe src="https://watch.wave.video/60073f3d46e0fb00017557d4"
frameborder="0" allowfullscreen style="width:100%;height:100%;"></iframe>
Your problem is not with iframe tag but with your link as it is not returning you directly the video.
If you have access to that link you can update it to return a video with 100% width and height. Since you are using plyr try to include this style:
.plyr {
height: 100%;
width :100%;
}
Related
I am trying to embed a vimeo iframe with 100% width.
If I try like that it is not getting the full width:
<iframe title="vimeo-player" src=" <?php echo $src; ?>" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen></iframe>
If I use suggested answers in similar questions then the iframe is dissapeared:
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
Here is the link https://kappagram.tk/work/bookoo/ with fixed height but its not what I want because in smaller screens there is a blank space...
The div with the id #gallery and it's parent section both have small padding on the sides (left & right). By removing those paddings (I've used the Google Dev Tools to test it), the width cover the whole width,
Width 100% means 100% of it's parents width, but also with it's margin and padding.
I would suggest giving the width a relative length unit such as 'vw'. You can read more about relative length unit in CSS over here: W3Schools documents on CSS Units
I want to make a custom height video background for a specific div container and display contents like headings,paragraphs on top of it...
When I keep the height at 100%, the video works just fine with full width..But when I try to resize the height, the width also reduces.
How do I make the video display at a height of 500px for example and keep the width at full width...and to display a small paragraph with a heading in center of the video.
video#videobg {
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 500px;
}
<div class="container">
<video autoplay poster="Cheer-Up.jpg" id="videobg" loop>
<div><p>Something here</p></div>
<source src="Cheer-Up.webm" type="video/webm">
<source src="Cheer-Up.mp4" type="video/mp4">
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
try using CSS to set a specific height for the video container, but also setting the width you want it to stay. put this in your header.
<style>
#videobg {
height: <PUT YOUR HEIGHT HERE>;
width: <PUT YOUR WIDTH HERE>;
}
</style>
also, put the width at a specific pixel count. the 100% could change depending on the height.
Not sure why I can't get this to work. I'm certain I've used this method before but can't find anything on it and can't get the issue resolved. I have a container div that contains a video. The height and width of the video will always adher to the 16:9 ratio of the original video. The video is fixed as I will be adding more content to the container (.featured) div that will overlay over the video. I need the height of the container to equal the height of the video in order to solve my problem (not to mention help out with responsive issues i will run into). My code is as follows:
<div class="featured">
<video loop id="featured-content" class="featured-video" poster="/sites/all/themes/merge/img/poster-frame.jpg">
<source src="/sites/all/themes/merge/img/Atlanta-Test.mp4" type="video/mp4" >
</video>
<div class="main-wrap">
<h1>Learn</h1>
</div>
</div><!--end featured-->
And my sass:
.featured{width: 100%; height: auto;
#featured-content{width: 100%; height: auto;position: absolute;}
}
Problem is the content from the rest of my site is coming up over the top of the video. Need the container div to match the height the video's auto height but can't get it to work for some reason. Any help is much appreciated!
You should be able to drop the height specification, and try adjust display type to inline-block:
.featured {
width: 100%;
display:inline-block;
}
Fiddle (added red border for clarity)
You need to float the video.
#featured-content {
float: left;
}
http://codepen.io/PanosAngel/pen/jqabxJ
I currently have a vimeo video embedded into my website. (code below)
<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
As you can see I have autoplay on, and it also resizes to full width using the code above. My problem is I have just created a video on wideo.co and I need it to react in exactly the same way as the vimeo iframe above. Below is my Wideo iframe, can somebody show me how as I have tried and tried but can not seem to get it right.
<iframe width="540" height="310" src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500" frameborder="0"></iframe>
Full width videos are a bit tricky. There's no one-size-fits-all, but here's the gist of it:
Create a wrapping DIV that has percentage-based padding-top (note: the value will change depending on your situation - you need to play with this value, get a calculator, use dev tools... you'll figure it out).
Position absolute the iframe within the DIV, with a top and bottom set to 0
Set the iframe width and height to auto
Here's some code:
<style>
.video-wrapper {
position: relative;
/*
Play with this value until you get the right aspect ratio.
Note: Percentage based padding is calculated by the width of the containing element.
Note 2: This value will be different for every website and/or media query...
*/
padding-top: 45%;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* this will override the width=""/height="" properties defined on the iframe */
width: auto;
height: auto;
}
</style>
<div class="video-wrapper">
<iframe src="..." width="540" height="310"></iframe>
</div>
If you're lazy, you can also head over to fitvidsjs which handles creating the wrapping DIV and calculating the padding for you. It's a great piece of code and works quite nicely and does not require a calculator. I can calculate padding faster than I can go download the latest fitvids, upload it to my server, and reference it in code... but that's me.
Put the content in div and then add width="100%" to iframe code. Add autoplay back to code.
<div style="overflow: hidden;">
<iframe src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500&autoplay=1" width="100%" height="310" frameborder="0"></iframe>
</div>
I looked everywhere but no joy, the embed code will not go 100% width and not sure why? I know on the embed link it's wider then what it showing me, so I know it should be possible.
This the code:
<iframe src="https://embed.spotify.com/?uri=spotify:user:elaina79:playlist:17AFix67QKFL33ZsZGmdNq" style="width:100%; height:480px;"
frameborder="0" allowtransparency="true"></iframe>
And looks like...
http://i.imgur.com/QmDRk6m.png
Any ideas?
Yes, the iframe dont need to use style="" to create style.. use width or height
Example: <iframe src="smthinghere" width="100%" height="100%" style="width:100%; height:480px;" />
I hope it helps you
In the documentation it states that the max width is 640px. See Player min/max sizes.
Setting a width and height attribute with 100% shows only the player and not the playlist. I don't think you have enough control over the embed to make it fully fluid.
With CSS you can do
body{
overflow: hidden;
width: 100%;
height: 100%;
}
iframe {
height: 100%;
width:96%; /* for small screen sizes */
}
and you'll have the maximum allowed width for the iframe playlist and maximum height.
I tried this script which I've seen elsewhere, which mostly resolved the issue for me:
function respondify(){
$('iframe[src*="embed.spotify.com"]').each( function() {
$(this).css('width',$(this).parent(1).width());
$(this).attr('src',$(this).attr('src'));
});
}
$(document).ready(function(){
respondify();
});
$(window).resize(function() {
respondify();
});
However, at large widths, the #outerWidgetContainer didn't go full scale (stopped at 320px) until I set the iframe to the largest widget dimensions:
<iframe src="https://embed.spotify.com/?uri=spotify:user:1271829250:playlist:39OSZ9YnShKKkuL0Yc1iMp" frameborder="0" width="640px" height="720px"></iframe>
This triggered the #outerWidgetContainer to size to width:100% and everything worked. I also set overflow:hidden on my container so it wouldn't spill out.