Centering Bandcamp Embed HTML5, CSS - css

I'm having trouble centering the embedded bandcamp player on my webpage. Here's what I'm trying;
<div class="embed-responsive embed-responsive-4by3">
<iframe style="margin:0 auto" class="embed-responsive-item" src="https://bandcamp.com/EmbeddedPlayer/album=2135428685/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/" seamless></iframe>
</div>
I've tried a few different style parameters (display:block, auto, etc.), and had no luck. The player is locked to the left side of the div.
This is not an issue with the YouTube or Soundcloud embedded players. I use the same code as above, but leave out the style="" section.

Related

Embedded google form defaulting to center on mobile display

I have embedded a google form on my website here: https://gymefit.tw/groupclasssignup/
On the mobile view of this page in safari it seems to be defaulting to the center. I tried to fix it with CSS but have not had any luck
I've tried a bunch of stuff on css but am still a bit new so I think I am missing something here.
<div class="group">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSep0dl_-1LARR9R0ZVwrDz9Wy7rFI0cbxp6ckT6xAZFgLyLhQ/viewform?embedded=true" width="640" height="4303">
</iframe>
</div>
CSS:
.group iframe {
text-align:left !important;
}

Centering a Slideshow with CSS

I am not a coder by any means, I have very very little training and get by only with what I can pick up online. With that said, I apologize if this is a dumb question! I am a photographer who makes these slideshows for clients when their images are ready and I am having an issue getting them to center (horizontally) on whatever the page it is being displayed on. In my viewing galleries there are several different page widths, so even if I center manually using (i.e.: left 95px) or whatever it is for that page it obviously won't work on a different page with different site width. I am sure there is an easy universal command I can add to all of these slideshows that will make them center on every page but I can't figure it out -- any help would be greatly appreciated! Here is the code I am working with...
<style>
.ss-embed-container-89670 {
position:relative; padding-bottom:680px;
height:0; overflow:hidden; max-width:1020px} .ss-embed-container-89670
iframe {position:absolute; top:0;left:0; width:100%!important;
height:100%!important;
}
</style>
<div class="ss-embed-container-89670"><iframe src="https://greg-
ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
you could try to do something like this:
<div style="margin: 0 auto;">
<div class="ss-embed-container-89670"><iframe src="https://greg-
ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>

z-index and position properties spacing

I am sure this is a very confusing matter for most new developers.
And i am sorry if this subject was asked before, but i cant find a solution for a long time.
I am trying to create a video cover background, place some divs above it and then keep making divs under it.
Things become a little complicated when i started to work beneath the video cover.
- they appear beneath which is okay, but styling them with for example margins or placing tags affect immidiately the video cover div above which is confusing.
this is my code:
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-video" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro-video-poster.jpg?v=1.1.65') 50% bottom no-repeat;">
<video preload="none" poster="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/empty.gif" autoplay loop>
<source src="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro.mp4?v=1.1.65" type="video/mp4">
</video>
</div>
<div class="header-bg js-parallax" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/uploads/2016/04/intro-home.jpg') 50% 0 no-repeat;">
</div>
</div>
<div style="z-index: 100;">
<p>
some text here
</p>
</body>
</html>
preview pen
I am willing to place a video cover at the top of the sit. then add some content above the video. and then keep adding content under the video without affecting the positions and styles of the video and its above content.
any help would be aprriciated. thanks!
EDIT: By under the video i mean down the webpage..not actually under the video.
Not sure if this is the professional way to make it work.
I had to create another div under the video. and it also had to be with some content in it.
I have added a div with visibility set to hidden.
Then i could keep working on rest of the page.
I would appriciate any further comments about the topic and improvements.
thank you!

In bootstrap how to fit Image Automatically to All MobileDevice

In bootstrap css how does one fit an image or video automatically to all mobile devices based on its Resolution.
For images, use Bootstrap's Responsive Images functionality. For video or embedded content, use Bootstrap's Responsive Embed to preserve the aspect ratio.
Example (JS Fiddle):
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/%C3%84lvkarleby_June_2013.jpg/800px-%C3%84lvkarleby_June_2013.jpg" class="img-responsive">
<hr>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="responsive-embed" src="https://www.youtube.com/embed/SirRu8mf3II" >
</iframe>
</div>

Indexing an image in-between already made content

I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.

Resources