When a user clicks on an image thumbnail it triggers an opaque modal background and YouTube video player sits on top of this.
1) How would I go about making this iFrame fluid responsive when the viewport is scaled down?
2) Even assuming we can get #1 working, how would I go about getting these YouTube videos to open in the default native player on iPhone/Android rather than the scaled down modal window which I'm hoping to accomplish in #1.
Currently the modal background and YouTube modal work perfectly on Desktop, but things begin to go South around 900px and down as the browser window is scaled in. Currently on iPhone/Android the videos don't play at all, not really sure what happens.
HTML
<section class="modal-wrapper valign">
<section class="youtube-modal">
<button class="close-youtube-modal"></button>
<iframe src="http://www.youtube.com/v/OnAHIH4p5Vg?version=3&enablejsapi=1&autoplay=1" frameborder="0" allowfullscreen="allowfullscreen" class="youTubeIframe" width="854" height="480"></iframe>
</section>
CSS
section.modal-wrapper {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
text-align: center;
background: rgba(0, 0, 0, .55);
}
section.youtube-modal {
display: none;
width: 854px;
position: relative;
z-index: 1000;
background-color: transparent;
}
button.close-youtube-modal {
position: absolute;
top: 0px;
left: 0px;
width: 25px;
height: 26px;
background: url(../images/close-youtube.png) no-repeat;
cursor: pointer;
outline: none;
border: none;
}
section.youtube-modal iframe {
margin-top: 35px;
}
JS
function youTubeModal() {
var thumbnail = document.querySelectorAll('.thumbnail-container ul li'),
modalWrapper = document.querySelector('.modal-wrapper'),
youTubeModal = document.querySelector('.modal-wrapper .youtube-modal'),
youTubeIframe = document.querySelector('.youTubeIframe'),
closeVideo = document.querySelector('.close-youtube-modal'),
staticVideoContainer = document.querySelector('.staticVideoContainer'),
videoWidth = 854,
videoHeight = 480;
for (var i=0;i<thumbnail.length;i++) {
thumbnail[i].addEventListener('click', function (e) {
var data = e.target.getAttribute('data-videoid');
modalWrapper.style.display = 'block';
youTubeModal.style.display = 'inline-block';
youTubeIframe.setAttribute('src', 'http://www.youtube.com/v/' + data + '?version=3&enablejsapi=1&autoplay=1');
youTubeIframe.setAttribute('width', videoWidth);
youTubeIframe.setAttribute('height', videoHeight);
}, false);
}
staticVideoContainer.addEventListener('click', function(e) {
var data = staticVideoContainer.getAttribute('data-videoid');
modalWrapper.style.display = 'block';
youTubeModal.style.display = 'inline-block';
youTubeIframe.setAttribute('src', 'http://www.youtube.com/v/' + data + '?version=3&enablejsapi=1&autoplay=1');
youTubeIframe.setAttribute('width', videoWidth);
youTubeIframe.setAttribute('height', videoHeight);
}, false);
closeVideo.addEventListener('click', function () {
youTubeModal.style.display = 'none';
modalWrapper.style.display = 'none';
youTubeIframe.setAttribute('src', '');
}, false);
}
for responsiveness, follow this solution:
.iframe-parent {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.iframe-parent iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
added 'iframe-parent' class to the parent div of the iframe tag
Related
I have an image inside a container. The image has object-fit contain set to it in order to maintain aspect ratio. It does this, but just shy away from perfect.
When I open the image in a new tab and compare it with the one in my browser, the browser image shows the slightest blurriness compared to the one in the new tab.
I've tried setting max-width, max-height, to the image and all gave the same result. The image dimensions ended up being different by a few decimal points which caused blurriness.
I want the image to be inside the container while maintaining aspect ratio like how it is in a new tab.
HTML
"use strict";
const $ = (selector) => document.querySelector(selector);
const gallery = $(".gallery").childNodes;
const slides = $("#my_modal").childNodes;
$(".gallery").addEventListener("click", evt => {
for ( let i in gallery ) {
if ( evt.target == gallery[i] ) {
$("#my_modal").style.display = "initial";
slides[i].style.display = "initial";
$("#my_modal").addEventListener("click", evt => {
if ( evt.target == $("#my_modal") ) {
$("#my_modal").style.display = "none";
slides[i].style.display = "none";
}
});
}
}
});
* { box-sizing: border-box; }
html {
margin: 0;
padding: 0;
color: white;
font-size: 16px;
}
body {
overflow: hidden;
background-color: black;
}
.gallery {
text-align: center;
}
.gallery img {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
}
.my_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
height: 90%;
width: 90%;
background-color: gray;
}
.my_slides img {
width: 100%;
height: 100%;
object-fit: contain;
}
<body>
<div class="gallery">
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="">
</div>
<div id="my_modal" class="modal">
<div id="boros1" class="my_slides">
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="">
</div>
</div>
</body>
Here is my JSFiddle https://jsfiddle.net/38rauwnf/
I suggest replicating on your machine in order to see the whole browser and opening the image in a new tab and comparing the images. The blue eyeball will be blurrier than the new tab.
Here is the image in the browser https://i.imgur.com/k2550RW.png
Here is the image in the new tab https://i.imgur.com/qwFybbj.png
EDIT: My problem has been solved on this post My images are blurry in Chrome but not Firefox w/ video demonstration
I am new to js. When I click on my menu image it changes to close image but it is not sliding the whole menu it just stuck there. In short when I click it goes to else and executes menu.src = "img/close.png" how to fix it?
my js code:
let menuButton = document.querySelector("#menuButton");
let side = document.querySelector("#sideNav");
let menu = document.querySelector("#menu");
//side.style.width = "-250px"
menuButton.onclick = function(){
if(side.style.right == "-250px"){
side.style.right = "0px"
menu.src = "img/close.png"
} else{
side.style.right == "0px";
menu.src = "img/close.png"
}
}
My css code
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: -250px;
top: 0;
background-color: #009688;
z-index: 2;
transition: .5s;
}
nav ul li {
margin: 50px 20px;
list-style: none;
}
nav ul li a{
text-decoration: none;
color: white;
}
#menuButton{
width: 50px;
height: 60px;
background: #009688 ;
text-align: center;
position: fixed;
right: 30px;
top: 20px;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
#menuButton img{
width: 30px;
margin-top: 15px;
}
let menuButton = document.querySelector("#menuButton");
let side = document.querySelector("#sideNav");
let menu = document.querySelector("#menu");
menuButton.addEventListener("click",() => {
side.classList.toogle(".nav--expanded")
})
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: -250px;
top: 0;
background-color: #009688;
z-index: 2;
transition: .5s;
}
#sideNav.nav--expanded{
right: 0;
}
Let’s look at what happens when you click
if(side.style.right == "-250px"){ // if the menu is already out of view
side.style.right = "0px" //bring it into view - OK
menu.src = "img/close.png" // show a close button - OK
} else{ // otherwise the menu is already in view
side.style.right == "0px"; // so we need to put it out if view, Not keep it where it is - Not OK
menu.src = "img/close.png" // an we probably want to show a menu img here, not the close one since it’s going to be closed by now - not OK
}
I have a video that is controlled by the user scroll, this works really nicely on safari, but on chrome it lags and jumps point to point rather than play smoothly. Is this an issue with my video file or is it something to do with my chrome?
Link to example: https://advancedriderwear.com/Updates/Feature-Test/Video/
Code:
HTML:
<div id="set-height"></div>
<div id="time"></div>
<div id="scroll"></div>
<div class="video-stick">
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="Beast_exploding_animation.mp4"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="Beast_exploding_animation.mp4"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="Beast_exploding_animation.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
</div>
CSS:
body{
background: black;
}
.space{
height: 100vh;
width: 100%;
background: black;
}
#video-stick{
position: relative;
text-align: center'
}
#set-height {
display: block;
height: 9000px;
}
#v0 {
position: fixed;
top: 50px;
height: 80%;
margin: auto;
}
#time {
position: fixed;
display: block;
top: 10px;
right: 10px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 20px;
background-color: rgba(0,0,255,0.5);
}
#scroll {
position: fixed;
display: block;
top: 10px;
right: 10px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 20px;
background-color: rgba(255,0,0,0.5);
}
JS:
// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height()-20;
var scrollpos = window.pageYOffset/400;
var targetscrollpos = scrollpos;
var accel = 0;
// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
// pause video on load
vid.pause();
window.onscroll = function(){
//Set the video position that we want to end up at:
targetscrollpos = window.pageYOffset/400;
//move the red dot to a position across the side of the screen
//that indicates how far we've scrolled.
scroll.css('top', 10+(window.pageYOffset/5000*windowheight));
};
setInterval(function(){
//Accelerate towards the target:
scrollpos += (targetscrollpos - scrollpos)*accelamount;
//move the blue dot to a position across the side of the screen
//that indicates where the current video scroll pos is.
time.css('top', 10+(scrollpos/5000*400*windowheight));
//update video playback
vid.currentTime = scrollpos;
vid.pause();
}, 40);
need to create a live stream page in a website where in the video window when there is no video stream there could be a poster if you will until the video is shown.
would appreciate all the help I could get.
( I already have the iframe tags in place just wanted to know if it is possible. for the site I am using bootstrap.)
Thank you
Falkon
Try this as you have jquery tagged.
$(function() {
var videos = $(".video");
videos.on("click", function(){
var elm = $(this),
conts = elm.contents(),
le = conts.length,
ifr = null;
for(var i = 0; i<le; i++){
if(conts[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
.video img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; }
.video:after { content: ""; position: absolute; display: block;
background: url(play-button.png) no-repeat 0 0;
top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* image poster clicked, player class added using js */
.video.player img { display: none; }
.video.player:after { display: none; }
<div class="video">
<img src="poster.jpg">
<iframe width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
I've been racking my brain trying to get two problems figured out. One is an image cropping and the other is and image resizing one. Here is a overview of the code I have:
HTML code:
<script src="main.js"></script>
<div class="mainDiv">
<div class="columnDiv1">
<!-- a div here a div there -->
</div>
<div class="columnDiv2">
<div class="iconDiv1">Icon 1</div>
<div class="iconDiv2"><img src="/images/div2Icon.png" id="div2IconImg" width="1" /></div>
</div>
<div class="columnDiv3">
<!-- a div here a div there -->
</div>
<div class="bottomRowDiv">
<!-- a div here a div there -->
</div>
</div>
CSS code:
<style type="text/css">
.mainDiv {
z-index: 2;
float: left;
width: 1112px;
position: relative;
overflow: hidden;
}
.columnDiv1 {
z-index: 20;
position: absolute;
width: 33.36%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv2 {
z-index: 20;
position: absolute;
width: 30.31%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv3 {
z-index: 20;
position: absolute;
width: 36.33%;
padding: 0px;
float: left;
border: 0px solid;
}
.bottomRowDiv {
z-index: 20;
position: absolute;
width: 100%;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv1 */
.iconDiv1 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 75px;
padding-right: 0px;
float: left;
border: 0px solid;
}
.iconDiv2 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv3 */
/* stuff in here for bottomRowDiv */
#iconDiv1_link {
display:block;
text-indent: -10000px;
background: url(/images/div1.png) no-repeat;
background-position: center top;
}
#iconDiv1_link:hover {
background-image: url(/images/div1hover.png);
}
</style>
JavaScript code:
_spBodyOnLoadFunctionNames.push('sizeImageMap()');
function sizeImageMap()
{
// get screen information
var currentScreenWidth = screen.width;
var currentScreenHeight = screen.height;
// get images' information
//define Image Icon Hash keys
var imgIconHash = {};
imgIconHash['image1_link'] = {};
...
...
imgIconHash['iconDiv1_link'] = {};
imgIconHash['div2IconImg'] = {};
...
...
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLinkStyle = imgLink.currentStyle || window.getComputedStyle(imgLink, false);
imgIconHash[imgLinkName]['src']=imgLinkStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
} else if (imgLink.nodeName === "IMG") {
imgIconHash[imgLinkName]['src']=imgLink.getAttribute('src');
} else {
// not A or IMG nodes
}
// get image width and height
var tmpImg = new Image();
imgIconHash[imgLinkName]['width']=tmpImg.width;
imgIconHash[imgLinkName]['height']=tmpImg.height;
}
// initialize scaling factors
var imgScale = 1;
//set scaling factors
if(currentScreenHeight >= /*given amount*/ ) // set scale
{
imgScale = 0.5676; // reset image scale
} else {
imgScale = 0.3784; // reset image scale
}
//resize images
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLink.style.background.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.background.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
} else if (imgLink.nodeName === "IMG") {
imgLink.style.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
}
}
}
Note, this is a webpage content part in SharePoint, hence the "_spBodyOnLoadFunctionNames.push('sizeImageMap()');" to perform an operation similar to document.onload.
So, two problems I am having:
The image in the 'columnDiv2' of 'iconDiv1' seems to be being cropped. It's size is 322px width and 128px height. The left and top don't appear to be being cropped, but the bottom and right do appear, or more so, don't appear, as though they have been cropped. I have seven other images in my code that are handled the same way, and have no problems with them, but this one appears to have the problem. It's not noticeable on the first loaded image, but on the image that shows after a 'hover', you can see the cropping.
I can get the IMG's width and height, but not the a-href link's background width and height. Any direction for this would be helpful. Also, I am doing this so that the images can be resized. Note the links are id's and not class's, as I was unable to find an easy way to access the existing images width and height, before loading, and then how to resize the a-href link's size after getting it. As said, the IMG works fine, just the A doesn't want to cooperate.
Thank you in advance.