I am not a developer, which I will make painfully clear here:
There are 3 full screen video background elements towards the top of my company website’s homepage (papertown.tv — see the rows titled, 'how it should be,’ ‘your value with replay value,’ and ‘simply, lasting results’), which I cannot for the life of me seem to coerce into scaling down with the viewport. In other words, instead of maintaining their full fields-of-view as the viewport shrinks, they get cropped by their respective rows. It’s to the point where it’s nearly impossible to tell what’s happening in the videos on mobile.
I tried this #media query but it just made the videos float around awkwardly inside the rows:
#media (max-width: 798px) {
#this-is-how-mobile .fl-bg-video,
#your-value-with-mobile .fl-bg-video,
#simply-lasting-results-mobile .fl-bg-video
{
height: 1920px;
width: 1080px;
-webkit-transform: scale(.45);
transform-origin: 0% -27%;
z-index:-1!important;
The site was built on WordPress with Beaver Builder (sorry). But this should be a simple fix, no?
Happy to send some Doge or Ether to whomever helps me solve this.
Many thanks in advance.
You can wrap the iframe with the following html/css and it will scale to fit the size of the container.
CSS
.video-wrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
margin-bottom: 30px;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-wrap">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="https://player.vimeo.com/video/572629737?title=0&byline=0&muted=1&autoplay=1&loop=1&background=1&app_id=122963" frameborder="0" allowfullscreen></iframe>
</div>
Related
Tried different method to customise(hide YouTube title,logo etc). But still not working. My goal was to hide the title top bar primarily. So looking for some guidance if this is possible at the current time?
*Tried css method,iframe viewport method and some other
Well, there is a solution since youtube deprecated the parameter showinfo, you can use html and css.
First, you have to put the youtube iframe in a div:
<div class="frame-container">
<iframe></iframe>
</div>
Next, you must increase the size of the frame so that it is outside the browser window, and then align it in the centre, since youtube only tries to centre the video and keeps its logos on the sides, this trick should work.
.frame-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
width: 300%; /* enlarge beyond browser width */
left: -100%; /* center */
}
.frame-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and finally, to prevent everything from stretching because of the size, you put it inside a wrapper.
<div class="wrapper">
<div class="frame-container">
<iframe></iframe>
</div>
</div>
.wrapper {
overflow: hidden;
max-width: 100%;
}
EDIT 1: In case you want to disable suggested video and just allow pause, you have to replace the url with:
In that case, you have to replace the youtube url with:
https://www.youtube.com/embed/VIDEOID?playlist=VIDEOID&loop=1
When the video is looped, the suggested videos will be disabled, and even with the controls disabled you can pause the video by clicking on the video.
Fixing padding issues when using iframe css responsiveness trick.
.videoWrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
People use this css trick in order to insure the iframe stays responsive while the video preserves its aspect ratio, but the problem is when you use a different value than 100%.
<div class="videoWrap">
<iframe width="560" height="315" src="//www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
</div>
I have an example below. And the issue is that depending on the device the margin between the video and the text becomes bigger, I want to keep the margin to a minimum, but it's hard to put a maximum value to the margin below of the video. Is there an easy way to do this? The only solution would be to use a lot of media query, but I only use 5 breakpoints on my website, I would have to use 9 or more to prevent the bottom margin from becoming too large.
Is there a better way around this issue?
https://codepen.io/codepen_user_123/pen/KKNmLad
I am trying to make my youtube embedded video 100% width of the screen like can be seen here but without black space between the edges which can be seen here at the side of the video. this is caused by me setting a max-height of 600px.
.
I am able to make the video responsive, and I want to set a max-height on it so that when the screen is big that it doesn't take up the entire screen, but instead just a section that is responsive but remains the same height like on the site I have shown above.
Please see jsfiddle here. If you resize the jsfiddle and make it go as big as it can you will see that it stretches below the end of the screen. I want to prevent this, but without creating black space between the video and the iframe border. By setting max-width on the iframe this black space appears which i want to avoid.
I hope there is no confusion, but if so please let me know and i can provide more details. I can see that the iframe attributes are constantly changing in the page I have provided as an example, but cannot see where this is happening.
#home-video {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
}
#home-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-image {
width: 100%;
background: url(http://ichef.bbci.co.uk/news/976/cpsprodpb/10E0E/production/_88043196_bret_hart_1920x1080.jpg) center center no-repeat;
background-size: cover;
height: 100%;
}
<div class="main-image">
</div>
<section id="home-video">
<iframe id="video " src="https://www.youtube.com/embed/QP5_n5UmbHc "></iframe>
</section>
The page you provided uses this plugin to achieve that effect.
The plugin allows you to set a video as a kind of a background image in the same way as in the page you provided.
Hope it helps.
I am placing video players with playlists iframed on a WP page. I have them wrapped with a div that has responsive css applied both to the div and the iframe with padding-bottom etc. Problem is when viewed on a mobile device the video is not resizing to fit the width of device. I emailed myself direct links to the videos and they loaded/resized correctly, so i know its not the videos.
Here are two pages each having a different version of a video player, one of them is a Youtube player:
http://events.latimes.com/screenings/gallery-test-2/
http://events.latimes.com/screenings/html5-videos-test/
Any help would be immensely appreciated as i've been on this for too long and need to resolve it. Let me know if I can post extra info or any code snippets to be help in troubleshooting.
This worked for me
see on JSfiddle
.video-container {
position: relative;
padding-bottom: 53.2%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* avexdesigns.com say use 56.25% above if your video has a 16:9 aspect ratio */
<div class="video-container">
<iframe src="https://www.youtube.com/embed/GA1Nr0SNEYE?rel=0" width="853" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<!--- Many Thanks to
http://avexdesigns.com/responsive-youtube-embed/
for this solution
-->
I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.
Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).
Here's the link: http://chrisphoto.com/masters2/index.html#chapter-2
Here you can get some awesome tricks on responsive videos in CSS, youtube iframe too.
For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "video_wrapper"
.video_wrapper{
margin: 82px auto;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; width: 80%;
}
.vdo_span iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%; /* Adjust height to your own need */
}