I have a video that is meant to appear in all screen sizes (except xs) over 4 columns. The code below isn't responsive, displaying the video VERY large. Tearing my hair out, need help!
<div class="hidden-xs col-sm-4 embed-responsive-16by9">
<video class="embed-responsive-item" title="Former Balmain Massage therapist Blaise Bowling shows the ins and outs of pregnancy massage" poster="../../images/blaises_pregnancy_poster.jpg" controls src="../../video/pregnancy360.mp4" type="video/mp4">
</video>
</div>
The original video is barely 360px wide and it's rendered far too big... The page is at https://balmainmassage.com.au/2015/modalities/pregnancy.html
Thanks
Claudio
In your html, I assume you have this in your <head> :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
You should put your video in a <div> something like this:
<div class="responsive_video">
<video src="yourfolder/yourvideo.mp4" controls="controls" type="video/mp4" </video>
</div>
Then, you should have this under your #media only screen and (max-width : 960px) in the bottom of your css:
#media only screen and (max-width : 960px) {
.responsive_video video{
width:100%;
}
}
Related
I have the following page where I added the css:
body{
height:100%;
overflow:hidden;
}
which stops the page from moving up and down on a mobile device. However, when I focus on one of the inputs the page can then move around (up and down). How do I prevent that?
body {
height: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Login</title>
</head>
<body>
<div class='container'>
<form>
<input type='text'>
</form>
</div>
</body>
</html>
Use this:
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
I noticed, you already have it set. But I had the same problem and it was because my meta tag at first didn’t have it initially and when I did implement it, it was messy. I cleaned it up, as above and now it works.
In my case I didn’t like the x-overflow on mobile.
Credit to this article where it states setting the user-scalable =no. That is the source of your problem.
How to prevent zooming and moving page on mobile browsers?
Here there is an example of my problem:
http://asdcastelli.altervista.org/test-bootstrap/
In the head i have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but the responsive works only if i resize the window browser, not in mobile
Why?
This is the page in the resized windows browser
This is the page in the mobile view (chrome inspector)
You have to include table into a div.
<div class="responsive_table">
<table id="pubblicazioni_table">
/*your content*/
</table>
</div>
and on your css, you have to paste this line:
.responsive_table { overflow-x: scroll; width: 100%; }
I have a scenario, i have to play two video in HTML5 player in mobile browsers. The videos are playing fine in desktop browsers.
one thing i know ,
We not autoplay videos in mobile browsers, user has to tap on the video player to play video.
What i am doing, on video ended event of first video i am changing the src of the . but sometimes it is shaky or it does not plays the second video. user has to tap on play button to play 2nd video. I just need to exclude the 2nd tap. YouTube is doing this somehow. The ad video plays fine, the player minimize and then the 2nd video starts playing.
It takes much time to play the video on start.
Following is my sample implementation. try this url in iPhone or Android
http://abuzer.github.io/videojs-liverail-vpaid/sample.html
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
video1 = 'https://d3hh3bpy3h68fd.cloudfront.net/processed_videos/47fad7e0-7477-0132-8e95-123139254ded/_preview_640x480_2932_edit.mp4';
video2 = 'https://drgta5lwz3cck.cloudfront.net/uploads-public-videos/fd6eefe0-73cc-0132-a03a-12313b07582a/640x480.mp4';
video1Played = false;
video2Played = false;
$(function() {
$('#playAd').on('click', function() {
$('#playAd').hide();
$('#videoElement').attr('src', video1);
$('#videoSource').attr('src', video1);
$('#videoElement')[0].play();
video1Played = true;
});
$('#videoElement').bind('ended', function() {
if (video1Played && !video2Played) {
$('#videoElement').attr('src', video2);
$('#videoSource').attr('src', video2);
$('#videoElement')[0].load();
$('#videoElement')[0].play();
video2Played = true;
}
});
$('.videoElement').bind('progress', function(e) {
$('#state').hide();
});
$('.videoElement').bind('waiting', function(e) {
$('#state').show();
});
});
</script>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
</head>
<body>
<button type="button" id="playAd">Click to Play</button>
<div id="videoWrapper" style="">
<div id="state" style="display:none; text-align: center">
<img style="-webkit-user-select: none" src="http://www.loadinfo.net/images/preview/14_cyrle_four_24.gif?1384388177">
</div>
<video x-webkit-airplay="allow" id="videoElement" class="video-js videoElement vjs-default-skin" height="50%" width="100%" controls src="" poster="">
<source id="videoSource" src="" type="video/mp4">
</video>
<!-- <video data-setup="{}" x-webkit-airplay="allow" id="videoElement1" class="video-js videoElement1 vjs-default-skin" height="50%" width="100%" controls src="" poster="">
<source id="videoSource" src="https://d3hh3bpy3h68fd.cloudfront.net/processed_videos/47fad7e0-7477-0132-8e95-123139254ded/_preview_640x480_2932_edit.mp4" type="video/mp4">
</video>
-->
</div>
</body>
</html>
Having an issue that has been frustrating me the last few days.
I have some videos on a site that are loaded dynamically from sitecore, and display on a page with thumbnail images. When you click those images you are taken to a lightbox with the video.
The problem is, the video plays in Chrome, Firefox and IE8 -, but not IE9 +. I thought it may be an encoding issue, but I have converted this video so many times to every format available to the web to no avail.
I am setting the plugin to load the video as flash first, then if flash isn't available, load as html5. This will clear all worries in terms of browser support of HTML5 video.
I was thinking that it may be the lightbox and videoJS plugin fighting with each other, or the fact that i am hiding videos and showing them, which i know can sometimes cause issues. I have decided to use a different lightbox, and people seem to have said that colorbox is a decent one to use with videoJS, especially since it has some built in callbacks onLoad.
On to the problem and the code:
The problem:
This lightbox is working, but videoJS seems to throw a few errors when i try and reset the player, which is breaking the videos in IE since its such a dumb browser.
As you can see in the demo link at the bottom, the videos play in IE just fine when they are just set on the page, but when you open the lightbox by pressing "vid1" or "vid2" you are riddled with console errors and the videos no longer play.
The code:
HTML + jScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> </script>
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<link type="text/css" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".inline", this).colorbox({
inline: true,
rel: 'videohook',
width: '650px',
onLoad: function() {
//grab the video ID and store it
var vidID = $(this).attr("data-vidID");
//Reset the video players
videojs.players = {};
//set the videoJS player for this video.
videojs(vidID);
}
});
});
</script>
<a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
<a rel="videohook" data-vidID="my_video_2" class="inline" href="#video_2">vid 2</a>
<div id="video_1" class="video">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="none" width="640" height="264" poster=""
data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type='video/ogv'>
</video>
</div>
<div id="video_2" class="video">
<video id="my_video_2" class="video-js vjs-default-skin" controls
preload="none" width="640" height="264" poster=""
data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type='video/ogv'>
</video>
</div>
</body>
</html>
Console errors im getting:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'vjs_getProperty'
LIVE DEMO:
Go here to see the errors for yourself: http://kodistro.com
In this case, my solution is to inject the video tag HTML into the lightbox content (when opening) and then call videojs().
So, in pseudo-code:
<script type="text/javascript">
$(document).ready(function() {
$(".inline", this).colorbox({
inline: true,
rel: 'videohook',
width: '650px',
height: '274', //the size most be fixed
onLoad: function() {
var appendVideo1 = '<video id="my_video_1"......> </video>'; //insert the <video> tag. Note.Remove attribute data-setup='{"techOrder": ["flash", "html5"]}'
$("video_1").append(appendVideo1);
},
onComplete: function() {
videojs(my_video_1); //initialize video-js
},
onClosed: function() {
videojs(my_video_1).dispose(); //destroy video-js
}
});
});
</script>
<a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
<div id="video_1" class="video">
</div>
I have recently started building in html5 playing around with video.js.
I have the videos working in all browsers except ie8.
Problem in ie8 is the video plays but with no controls.
please see my code below:-
<!doctype html>
<!--[if IE 8]><html class="ie8" dir="ltr" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" dir="ltr" lang="en"><![endif]-->
<!--[if gt IE 9]><!--> <html dir="ltr" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="Storm Creative" />
<title>Ventrica <?php echo $title; ?></title>
<script src="<?php echo DIRECTORY; ?>assets/scripts/utils/modernizr.min.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<?php foreach ( $stylesheets as $style ): ?>
<link rel="stylesheet" href="<?php echo $style; ?>" />
<?php endforeach; ?>
</head>
<body>
<div class="header_img"></div>
<div class="wrapper">
<?php include "assets/includes/navigation.php"; flush(); ?>
<div class="video_section">
<div class="mac">
<div class="screen"></div>
<video autoplay="" controls="" loop="" width="310" height="185" class="mac_player video-js vjs-default-skin" id="js-video" preload="auto" data-setup='{"techOrder": ["html5", "flash"]}'> <source src="assets/video/large.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="assets/video/large.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="assets/video/large.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="310" height="185">
<embed width="310" height="185" src="assets/video/large.swf" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</video>
</div>
<div class="see_team">
<h3 class="hidetxt">See Our team in action...</h3>
<p><b>Watch our video and see our team in action to learn more about our multilingual services, quality assurance and training.</b></p>
<p>If you are looking for a company to help manage your customer communication then you will want to partner with a contact centre that inspires trust, demonstrates credibility and has already been chosen by numerous “Blue Chip” companies to handle their customer contact...</p>
Choose Ventrica
</div>
</div>
<script>
var myPlayer = _V_('js-video');
_V_("js-video").ready(function(){
myPlayer.volume(0);
var onFullScreen = function(){
if (this.isFullScreen) {
this.volume(1);
myPlayer.currentTime(0);
} else {
this.volume(0);
}
};
myPlayer.addEvent("fullscreenchange", onFullScreen);
});
</script>
Any one had this problem?
Thanks.
I found this thread and a few similar ones... none of the solutions worked for me.
Eventually I figured out the problem (in my case, at least), which involves IE8 not being able to handle :before while in IE7 mode. Solution is here:
https://stackoverflow.com/a/22645786/2895604
I'm just now seeing that we have a related post. I too, have just about the same issue and am thinking it is CSS based.
Not sure if I should delete my post or mark it as duplicate somehow? Here it is here:
Video.js CSS Styling Broken in < IE9 - [A.K.A. Controls Hidden]