I'm using Thickbox to display videos on a website and the youtube video seems to be too large for the thickbox frame. I've tried decreasing the youtube video size but the thick box seems to follow the size of the video because no matter what I adjust the size to I always have this:
http://imgur.com/KJ2kJYr
Notice in the bottom right corner, the video goes outside the frame. Any suggestions are welcome.
Here is the html code for the video. Personal info has been removed (site name, youtube embed, etc.):
<a class="thickbox" href="//www.youtube.com/embed/XXXXXXXXX?rel=0&showinfo=0&controls=0&KeepThis=true&TB_iframe=true&height=400&width=600" title="XXXXXXXXX"><img src="http://www.XXXXXXXXXXX.org/campaign/wp-content/uploads/sites/59/2013/11/XXXXXXXXXX.png"/></a>
I would need the full code to give a complete answer, but based on my experience with other plugins:
Most plugins have very specific styles that are sometimes difficult to override. Give the video a "class" and set the width to width: 100% !important; (or whatever). This should override the defaults set in place by the plugin.
Related
I would like to use a short, looping YouTube video as a background element without displaying anything in the iframe except the content of the video, and without any jarring interruptions like a black screen or elements popping back into view.
If I embed an iframe with the following URL:
https://youtube.com/embed/f1HVVf_cPm4?playlist=f1HVVf_cPm4&autoplay=1&controls=0&rel=0&showinfo=0&autohide=1&modestbranding=1&mute=1&loop=1&disablekb=1&playsinline=1
The controls are visible at first and then fade out when playing (which I also don't want, they should never be visible), but also every time the video loops there is a split second where you see the title, controls, and a black background. I added every arg that seems like it could prevent this but it is still showing. This completely defeats the purpose of hiding these elements in the first place.
Is there any way to do this in an iframe?
I am making an html webpage with a video in the background and would like to accomplish the following using CSS:
The video keeps its aspect ratio
The video fills the width of the screen
At relatively large window size the whole video is visible
The video has a minimum height (i.e. when the window is shrunk, at a certain size, the whole video is no longer visible).
There are elements positioned directly below the video, dynamically following it if the window is resized
It would also be nice if when the video is invisible it is centered (not crucial).
I've been trying this for ages now and have been able to get most of the points but not all of them; in particular I find the last point (positioning another element directly below) to be hard to combine with the others. I've been using the html video element and CSS.
Is this possible?
You can use a Jquery plugin for this. I recommend looking at this one in particular.
Vide - Jquery Plugin For Fullscreen Background Videos
I want to put an embedded youtube video over the top of an image so it looks like there is a frame around the Youtube video. They are perfectly aligned horizontally, but I can't seem to align the video & image vertically. Somehow I need to add padding to the top of the Youtube video so it is lowered into the frame.
I'm using Wordpress and the measurements for the frame fit the video perfectly. I just need to lower the video into the frame.
Any ideas how to lower the Youtube video to make it align correctly inside the Frame?
Thank you!
You can use CSS to apply a margin or padding to the Youtube video HTML element (probably an iframe tag if you are embedding it)
So, your CSS may look something like this, depending on your HTML structure:
iframe { margin-top: 10px; }
You'll need to play around with the value of margin-top to make it align the way you like.
If you post the relevant HTML, I could give you specific CSS to use.
I'm trying to build a very simple proof-of-concept for the guys I work for to demonstrate something for them. As of right now, I've got everything working, except that in my (obviously extremely crude) website, I'm trying to embed a video and FORCE the video to completely fill a certain size. The main problem that I'm facing is that if I try to embed a video with:
<video width="1920" height="1080">
then it increases the size of the video screen (though not to those actual dimensions - it stops at a much smaller size), but keeps the actual viewable video size at the original dimensions and just adds a lot of black space into the video player.
Clearly, this isn't the right way to do this. I know HTML is usually regarded as pretty easy, but this is literally the first webpage I've had to do, haha. Any help is greatly appreciated!
I found this # http://www.w3schools.com/html5/att_video_height.asp
Note: Do not rescale video with the height and width attributes! Downsizing a large video with the height and width attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a page.
So guess you can't scale up a video with width and height tags. Just define it's dimensions so the browser can reserve space for it while loading a webpage.
Just wondering if anyone knows any tricks to getting regular html content (mainly an img tag) to display on top of a video (via the video tag)?
As others have intimated it's very easy to position HTML elements on top of VIDEO elements using absolute positioning. The challenge comes when you try to capture events on them in the iPhone, iPod and possibly older Android phones that don't play video assets inline on the page (as opposed to in a thin native playback client) since in those instances the VIDEO element greedily captures events.
If you use an IMAGE element or a DIV with its background-image set to an image you want to use as a "poster" or "thumbnail" then your users won't be able to tap on them to get the video to start playing -- the mobile browser will treat this behavior as if nothing but the VIDEO element exists in that space (good if you happen to click in the middle where the "big play" button is but not so helpful if you, say, have a custom control not in the middle.
The solution I've used in the past is to just put the IMG or DIV poster on the page where you would normally put the VIDEO element and shift the VIDEO element offscreen (absolutely positioned with left style set to, say, -3000px) so it can no longer hoard those events.
I know this isn't exactly what was asked, but hopefully this information will prove useful to someone.
You can simply put html elements on top of HTML5 video by positioning them absolutly on top of the video. Give both the video element and the HTML element a "position:absolute" and put the HTML element a z-index higher than the video element's.
Why not use the poster attribute? That way you can display an image until the video is loaded or play.
Can you set the video as background for that div? Not sure if it would work for your layout, but it seems logical...