I have the specification load load a modal window with a video using amp-html.
We are trying to achieve this using amp-lightbox with a amp-video inside the modal window. However, the video is not responding to the size of the modal window (I assume this is down to the initial display:none on the lightbox when the page is loaded).
I have the following amp-html;
<a class="travel-results-result-link block relative" on="tap:video-1">
<amp-img class="block rounded" width="346" height="200" noloading="" src="/images/video/image01.jpg"></amp-img>
</a>
//...
<amp-lightbox id="video-1" layout="nodisplay">
<div class="lightbox"
on="tap:video-1.close"
role="button"
tabindex="0">
<div class="modal-body">
<amp-video controls
width="320" height="240"
layout="responsive"
poster="images/video/image01.jpg">
<source src="videos/gail-video-1.mp4" type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</div>
</div>
</amp-lightbox>
The css for my modal body is simply;
.modal-body {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
margin-top: 75px;
height: calc(100% - 200px);
}
When I click to load the modal both the preload image and video are loading outside the boundaries of the modal-body div? can anyone suggest a way around this?
Related
I am trying to apply border radius corner edges in html video but unfortunately not applying please help me how can I do that ?
html view
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="rounded">
<video width="100%" height="800" autoplay loop muted>
<source src="{{ url('') }}/castle-theme-assets/video/video-slider.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
css
.rounded {
border-radius: 20px;
overflow: hidden;
-webkit-transform: translateZ(0);
margin-top: -43px;
}
try doing it directly inside the video tag or the source tag by adding a class to the source or video tag to see if it will reflect.
An embedded video will not size to the container div. I've edited the CSS and finally got the poster image to scale correctly, but now the video has cropped on left and right sides by about 50px respectively.
Am I missing a container for the video in the HTML5? Could you please take a look to check my markup and styling?
.blog-side {
position: relative;
}
.wrapper {
margin: 0 auto;
}
.videowrapper {
width: 100%;
height: auto;
text-align: center;
overflow: hidden;
position: relative;
}
<section class="blog-side sp-seven blog-style-one standard-post video-post">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12 content-side">
<div class="blog-details-content">
<div class="wrapper">
<div class="videowrapper">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" controls poster="images/news/orphan.png">
<source src="video/video1.webm" type="video/webm">
</video>
</div>
</div>
</div>
Many examples and instruction that I'm finding on google don't seem to work. I'm trying to keep the code clean.
Aspect Ratio
In the following demo any tag with non-Bootstrap classes was removed (it's a variable we can do without ATM. The Bootstrap looks good, There's two possible issues:
It could one or more of the non-Bootstrap classes.
or
The dimensions of your video isn't 16:9 ex. 640x360px, 1024x576, etc. The Bootstrap class .embed-responsive-16by9 requires that your video have an aspect ratio of 16:9.
Demo
The video in this demo is 320x240px an aspect ratio of 4:3 and the video tag has the class .embed-responsive-4by3
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class="container">
<section class="row">
<section class="col-md-9 col-sm-12 col-xs-12">
<figure class="embed-responsive embed-responsive-4by3">
<video class="embed-responsive-item" controls>
<source src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.ogg" type="video/ogg">
</video>
</figure>
</section>
</section>
</main>
I have created a custom video toolbar for displaying of video controls for HTML video tag.
i have positioned my custom toolbar to display over the video in full screen mode which displays correctly for Chrome but doesn't work for Firefox
HTML
<div class="wrapper-video">
<video id="player" data-setup="{}" class='video-js vjs-default-skin' width='635' height='432'>
<source src="" type="video/mp4">
</video>
<div class="playpause"></div>
</div>
<div class="info-video-title-bar">//Custom toolbar with video controls
<progress value="0" max="1000" id="lecture_progress_bar" class="time-tooltip">
<div class="progress-bar" id="progress-bar">
<span style="width: 0%;">Progress: 0%</span>
</div>
</progress>
<style>
</style>
<div class="audio-controls-container">
<span id="video-control-play" class="lecture-icon icon-WebFont-55"></span>
<span id="control-seek" class="lecture-icon icon-WebFont-57" onclick="mixpanel.track('Lecture Seek');"></span>
<span id="control-playback-rate" class="lecture-icon icon-WebFont-60">
</span>
<span class="icon-WebFont-77 full-screen">
</div>
</div>
JS
$(document).on('click', ".full-screen", function(){
if($(this).hasClass("icon-WebFont-77")){
$(".video-js")[0].player.requestFullscreen();
$(".info-video-title-bar").addClass("fixed");
$("progress").addClass("fixed-progress");
$(".audio-controls-container").addClass("fixed-controls");
$(".full-screen").removeClass("icon-WebFont-77").addClass("icon-WebFont-79");
}else if($(this).hasClass("icon-WebFont-79")){
exitFullScreen();
}
});
CSS
.fixed-progress{
width: 100% !important;
}
.fixed{
position: absolute;
z-index: 999999999999;
left: 0px;
line-height: 1px !important;
}
.fixed-controls{
max-width: 100%;
}
.video-js{
position: absolute;
}
.wrapper-video{
position: relative;
}
I having been trying for days now to move a video on top of a <div> which includes an <img>
Effectively I am trying to make the image of a TV show a video on its screen.
Could somebody help me in positioning the video so it is central to the image inside the screen. I can't even get the video to position on top of the <img> let alone making it the correct size and centering it.
Thanks in advance. Much appreciated.
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12">
<img class="img-responsive" src="img/TVWALLTWO.jpg">
<video controls="" height="330" width="440">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
</video>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
</div>
.videosheading {
color: #E3A750;
text-align: center;
}
.videogallery {
height: auto;
}
video {
background-color: red;
z-index:-1;
position:relative
}
To center the video over the responsive image, you need a container that has position: relative, than the video must have position: absolute. Look at the snippet bellow, hope you get the idea:
.video-cell {
positon: relative;
}
.video-cell img {
width: 100%;
}
.video-cell video {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12 video-cell">
<img class="img-responsive" src="https://placehold.it/880x660">
<video controls width="440" height="330">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</div>
</div>
Also on JSFiddle.
I am designing a site that has a semi-transparent container for the content, which is divided into two columns. My CSS:
#content {
width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px;
background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}
#sidebox {
width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right;
background-color: #FFF}
#main {
width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}
The HTML for embedding the video:
<div id="content">
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I put some static stuff in the sidebox and then make news posts to the main div. If I embed a video in an iframe in main, then the semi-opaque background from content (as well as the drop-shadow) doesn't render. I found a lot of solutions geared towards what to do if you want to overlay a div on an iframe, but nothing about putting an iframe in a div container screwing up the styling of that container.
The website, which currently has the video embedded: http://physics.nyu.edu/~dzb212/music_index.html
I'm not 100% sure of the reasoning behind it, but if you add display:inline-block to your content style it seems to work on my end
Try this...
html content :
<div id="content">
<p> content div </p>
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<p> main div </p>
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I noticed some strange behaviors arising from my use of <a href="blah" /> kinds of statements in my HTML. I was under the impression that <[stuff] /> was the same as <[stuff]></[stuff]>, and that it was just a convenient shorthand for an element that contained nothing else. However, I don't know if this is true, and I found that huge chunks of text were unexpectedly being moved into <a> elements. I therefore changed
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />`
to
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%"></iframe>
and all seems to be displaying correctly. I no longer even need display: inline-block in the content styling.
Thanks for your help.