I'm using bootstrap and I'd like to add some videos from youtube to my website. I've seen here some code to do so, but when I tried it here it doesn't work, the video isn't shown.
This is the code:
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=PIh2xe4jnpk"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=PIh2xe4jnpk"></iframe>
</div>
you have entered wrong yotube URL. you need to embedd the video...
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PIh2xe4jnpk"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PIh2xe4jnpk"></iframe>
</div>
Related
Here's my layout sample on bootply
Does this require a CSS 'hack' or did I get my markup wrong to begin with?
(or, is this the default intended Twitter bootstrap design)?
Just put the jumbotron in a row div:
<div class="row">
<div class="jumbotron">
.....
.....
</div>
</div>
OR use css to increase the width and adjust the position like:
<div class="jumbotron" style="width:102%; margin-left:-1%">
....
....
</div>
(not recommended)
This is what a default Jumbotron looks like. I'm not sure why you didn't just check the Bootstrap documentation to see their basic example?
Edit: The reason why your Jumbotron isn't the same width is because your table is wrapped in a .row class which has margin-left: -15px & margin-right: -15px applied to it.
To fix your issue, wrap your .jumbotron in a <div class="row"></div>
You should always place your elements within a column though. e.g. .row > .col-sm-12 > .jumbotron
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a lead</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.
I have this code
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-1 nopadding">
<div id="player">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-2 nopadding">
<div id="chat">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
</div>
</div>
</div>
<div class="col-md-offset-1"></div>
</div>
CSS:
.nopadding {
padding: 0 !important; }
I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.
The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?
You can do this by setting the chat wrapper to absolute and then setting the iframe inside of it to have a width and height of 100% and position the chat-wrapper to left of 50% and give the row that it is all wrapped in a class and a position of relatve. Then at smaller screens you can position the chat wrapper to relative and left of 0 so that it will stack below the player when you get to mobile widths. Here is the markup I used. Also in the example I use col-sm but you can change it to col-md I just used sm because its easier to view in the fiddle demo.
Here is a fiddle demo drag the output screen larger and smaller to see the results at different screen sizes Fiddle Demo
Html:
<div class="container-fluid">
<div class="row player-section">
<div class="col-sm-6 no-padding">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
</div>
</div>
<div class="chat-wrapper">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
</div>
</div>
</div>
Css:
.no-padding{
padding:0;
}
iframe{
border:none;
}
.player-section{
position:relative;
}
.chat-wrapper{
position:absolute;
left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
width:100%;
height:100%;
}
#media screen and (max-width:767px){
.chat-wrapper{position:relative;height:300px;left:0;}
}
Another option is to create you own custom aspect ratios, as described in this blog.
If for example you want to show a pdf (A4 size) in your webpage, you can add the following to your style sheet:
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
Now you can add your custom stylesheet to your iframe:
<div class="embed-responsive embed-responsive-210by297">
<iframe src="..."></iframe>
</div>
By customising the aspect ratio of the different iframes, you can align the heights of all iframes to match mutually. Another advantage is that you follow the bootstrap philosophy.
I'm using html5videoplayer 6.2.14 in a typo3 6.1.7 installation. The control bar doesn't appear as it should - either missing or double display (because the mouseover text like "play" appears with the image, mouseover text doesn't show up).
The plugin parameters are set to autoplay and show control bar.
http://www.alexianer-berlin-hedwigkliniken.de/index.php?id=5674
How can I correct this?
This is the code without control bar:
<div id="video_4" class="video-js vjs-default-skin vjs-paused" width="680" height="385" style="width: 680px; height: 385px;">
<video id="video_4_html5_api" class="vjs-tech" data-setup="{"techOrder":["youtube","vimeo","html5","flash"], "ytcontrols": true}" autoplay="" preload="auto">
</video>
</div>
And that's the code with double control bar:
<video id="video_4_html5_api" class="vjs-tech" data-setup="{"techOrder":["youtube","vimeo","html5","flash"], "ytcontrols": true}" autoplay="" preload="auto" src="....webm">
<div class="vjs-control-bar">
<div class="vjs-play-control vjs-control vjs-playing" role="button" aria-live="polite" tabindex="0">
<div class="vjs-control-content">
<span class="vjs-control-text">Pause</span>
</div>
</div>
</div>
Thanks for any help!
You're loading two different versions of video.js's javascript and css, and they're conflicting.
v4.9.0:
<link href="typo3conf/ext/html5videoplayer/Resources/Public/video-js-4.9.0/video-js.min.css" type="text/css" rel="stylesheet" media="screen" />
<script src="typo3conf/ext/html5videoplayer/Resources/Public/video-js-4.9.0/video.js" type="text/javascript"></script>
v3.2.0:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
You should remove the old version.
video.js Hello. I'm trying to have a video autoplay when slider starts. That part is working. Problem occurs though when it loops through and comes back to the video, the video will not replay. I've tried to figure it out with a loop="true" but if I do that it just plays video over and over and then slider doesn't work. Any advice? Thanks! (I can add my code if needed)
<meta charset="utf-8">
<title>AnythingSlider Video Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css">
<!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>
<!-- Anything Slider -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>
<script>
// DOM Ready
$(function(){
$('#slider')
.anythingSlider({
resizeContents : true,
autoPlay : true,
addWmodeToObject : 'opaque',
buildStartStop: false,
navigationFormatter : function(index, panel){ // Format navigation labels with text
return [][index - 1];
}
})
// Initialize video extension
// see https://developers.google.com/youtube /player_parameters?hl=en#Parameters for a list of parameters
.anythingSliderVideo({
startPanel : 1,
// video id prefix; suffix from
$.fn.anythingSliderVideo.videoIndex
videoId : 'asvideo',
// auto load YouTube api script
youtubeAutoLoad : false,
wmode: 'transparent&autoplay=1', // (hack) add autoplay code here
// see: https://developers.google.com/youtube /player_parameters#Parameters
youtubeParams: {
modestbranding : 1,
iv_load_policy : 3,
fs : 1
}
});
});
</script>
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<!-- START AnythingSlider -->
<ul id="slider">
<!-- HTML5 Video -->
<li class="panel5">
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" autoplay="true" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English">
</track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
</li>
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul> <!-- END AnythingSlider -->
<br>
</div>
<br>
You can add the autoplay parameter of the <video> tag to "autoplay" instead of true. This worked for me using Anything Slider.
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.