I was creating a website based on a video as a background for the homepage I came across a problem, I don't know what the problem is but I followed an online tutorial and it seems that the video that I was willing to put in my website has shown up but does not play and is way too big even when viewed at full screen.
here's the code:
<html>
<head>
<!-- settings -->
<title> Prestige</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" conetent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="Intro.mp4" autoplay="true" loop="true"></video>
</div>
</header>
</body>
If you mean the video is too big for your page->
You can resize the video by using width and height attribute.
for example:
<video src="Sample.mp4" width="320" height="240">
If you mean the video is too big in terms of memory->
try to compress the video or embed using embed tag. You can also try to update to the latest version of your browser.
You can try to upload your code in a code snippet to replicate it and see if there's a problem with your code.
You can try this code:
HTML
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
JS
<script>
// Get the video
var video = document.getElementById("myVideo");
// Get the button
var btn = document.getElementById("myBtn");
// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
Also you can check this here.
Related
You can try this full code on your computer. When I resize my Chrome and Firefox, the right hand side (which is column 2) will overrun the left hand side.
In jsfiddle this is harder to observe but if you want to: http://jsfiddle.net/kkmzkkyq/5/
It seems like this is caused by my col-xs-12 but isn't that used if I want a stack behavior?
Second problem is when I resize the window I can also see the right hand side continue (the text is not done!) How do I fix that? Am I supposed to apply text wrap?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>robots.txt scanner demo</title>
<link rel="stylesheet" type="text/css"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<!-- CSS are mainly based off
http://tech.deepumohan.com/2013/09/javascript-ace-editor-positioning-bootstrap.html
ACE editor CSS is a pain to work with....
-->
<style type="text/css" media="screen">
.right {
position: absolute;
padding-left: 0;
right: 0;
display: block;
padding: 0px;
height: 100%;
font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, sans-serif;
background: #708090;
color: black;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
top: 0;
bottom: 0;
left: 0;
padding-left: 0;
padding-right: 0;
}
#editor {
position: relative;
top: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 left">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-md-4 right">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
</script>
<script type="text/javascript" charset="utf-8"
src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" charset="utf-8"
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js">
</script>
</script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
</html>
Your biggest problem is that you're not including the bootstrap3.0.2.js file - the css alone is not enough.
Secondly - the grid "bubbles up" - so if you define col-xs-12 and no col value for "sm" you will get 12 as the col value for sm size screens. So you could do a col-sm-8 and remove the col-md-8.
You also don't need to add left or right as your classes. Here's a good explanation of the grid: http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system
And here is the body of your html: you have some messy (closed but never opened) script tags - and I added the include for the bootstrap JS file.
You still have to address the text issue (it's not being wrapped because there are no white spaces I would expect.
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-sm-4">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.
The point is to have this video to always be 100% of the viewport width;
But to have the height just to a point where no scroll is needed.
Can this be achieved without using overflow:hidden; ?
You can copy paste the following as is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello User!</title>
<style type="text/css">
div#video-border { border: 2px solid red; }
video { max-width: 100%; height: auto; width: 100%; }
</style>
</head>
<body>
<div>
<div>
Im the navigation!! Wupii
</div>
<div>
<p>I'm more text, more things</p>
<p>I'm more text, more things</p>
</div>
<div id="video-border">
<video controls="controls">
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
alt text
</video>
</div>
<div id="footer"><p>I'm the footer hello</p><p>I'm the footer yeah again</p></div>
</body>
</html>
To be honest, I'm not even sure if this solution will properly work. Not sure if the video will behave on those circumstances, still... wondering.
Please advice.
Agree with Patrick.
If you instead want to use it in a fixed, pre-calculated height box, use this:
div#video-border {
background-color: black;
border: 2px solid red;
}
video {
max-width: 100%;
width: 100%;
height: auto;
max-height: 150px; /* your desired height */
}
I'm trying to change a text link on my site to an image using css...need some help please. Below you will see my css - I would like to change my favorite text http://cl.ly/0S2j28082G2W423Y2T00 to an image.
a.upb_add_bookmark {
background: none repeat scroll 0 0 #E8BD61;
border-color: #C79324;
border-style: solid;
border-width: 1px;
color: black;
padding: 2px 5px;
text-decoration: none;
}
Your background property will need to be set to include the image. You will also need to set the <a> element as an inline-block so that you can declare a height and width for it.
a.upb_add_bookmark {
background: url('favorites-image.jpg') no-repeat;
display: inline-block;
height: 51px;
width: 92px;
}
Thats how you can display an image without actually using an <img> tag; nothing but css.
<img src="image.png" alt="Favorite icon" />
or
a {
background-image: url('image.png');
background-repeat: no-repeat;
display: inline-block;
height: 50px;
width: 150px;
}
Personally I would use the first one because the image is part of the structure and not a design element and CSS deals with design.
A very simple way to fix this problem
** 1. Create a div element that will encapsulate this image **
** 2. Add CSS in order to set that background of this div to be the image. (See code below). In this example the class name of your div will be called 'button'
.button
{
backgroundimage:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
Revise the Html *
Put the text you want to display into the aforementioned div with the class name 'button'
<div class="button">
<span>Favorite (1)</span>
</div>
* This will allow you to select the actual text while still maintaning the background *
Here is the complete version source with my modification for your reference.
<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">
<head>
<style>
.button
{
background-image:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
</style>
<title>Screen Shot 2012-02-09 at 12.02.45 PM.png</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" name="viewport">
<meta content="CloudApp" name="author">
<link href="http://assets.cld.me/1325250420/images/favicon.ico" rel="shortcut icon">
<!--[if (!IE)|(gte IE 8)]><!-->
<link href="http://assets.cld.me/1325250420/assets/viso-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link href="http://assets.cld.me/1325250420/assets/viso.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="http://assets.cld.me/1325250420/assets/viso.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://assets.cld.me/1325250420/assets/ie.js" type="text/javascript"></script>
<![endif]-->
</head>
<body id="image">
<header id="header">
<h1>Simple sharing</h1>
<h2>Screen Shot 2012-02-09 at 12.02.45 PM.png</h2>
<a class="embed" href="http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png">Direct link</a>
</header>
<section id="content">
<div class="button">
<span>Favorite (1)</span>
</div>
</section>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4ea557ec613f5d39e7000002');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>
a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}
This code works for me
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.