Sunday, 15 February 2015

css - Youtube Background -


I am trying to create a front page with a YouTube video as a backdrop and a definite transparent navigation. I have both, but I want the video to start at the top of the background page. This is an example;

  #bigvid { 

How to do it?

Hello, you can use tubular: tubular is quite old, so I've removed the necessary code for you. (The video is not equal to the CSS cover image, in full width and height),

html code:

  and 
id = "player container "Style =" overflow: hidden; condition: full; width: 100%; height: 100%; "& gt; & Lt; Div id = "player" style = "position: full" & gt; & Lt; / Div & gt;

Here is the content of the YouTube API cover style entirely, which is extracted from tubular. Jquery is required besides standard YouTube YouTube 5 Ephframe API code should also be included - as here:

  var proportion = 16/9; Window.onPlayerReady = function (e) {resize (); } $ (Window) .on ('resize', function () {resize ();}) var resize = function () {console.log ("resize"); Height height = $, width = $ (window). Width (), pWidth, // player width, height = $ (window) to be defined. Height () - Height correction, pHeight, // Player height, tbd $ videoPlayer = $ ('# player'); If (width / ratio> height) {// if new video height & lt; Window height (down interval) pWidth = Math.ceil (height * ratio); // New player width $ VideoPlayer.width (PWD). Height (height). CSS ({left: (width - PW_2 / 2, top: 0}); // Player width is high, offset left; reset top} and {// new video width  

No comments:

Post a Comment