13 апреля 2022 1 комментарий

Вместо iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/<?=$item['youtube_id']?>?autoplay=0" allowfullscreen></iframe>

отображаем div

<div class="youtube" id="<?=$item['youtube_id']?>"></div>

css:

.youtube{
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	display:inline-block;
	overflow:hidden;
	transition:all 200ms ease-out;
	cursor:pointer;
	height:360px;
}
.youtube .play{
	background:url('../images/youtube-play-btn.png') no-repeat;
	background-position:0 -50px;
	-webkit-background-size:100% auto;
	background-size:100% auto;
	position:absolute;
	height:50px;
	width:69px;
	transition:none;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	cursor:pointer;
}
.youtube:hover .play{
	background-position:0 0;
}

javascript:

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
	if(!document.getElementsByClassName){
		var getElementsByClassName=function(node, classname){
			var a=[];
			var re=new RegExp('(^| )'+classname+'( |$)');
			var els=node.getElementsByTagName("*");
			for(var i=0,j=els.length;i<j;i++)
				if(re.test(els[i].className))a.push(els[i]);
			return a;
		}
		var videos=getElementsByClassName(document.body,"youtube");
	}
	else{
		var videos=document.getElementsByClassName("youtube");
	}
	var nb_videos=videos.length;
	for (var i=0;i<nb_videos;i++){
		videos[i].style.backgroundImage='url(https://i.ytimg.com/vi/'+videos[i].id+'/sddefault.jpg)';
		var play=document.createElement("div");
		play.setAttribute("class","play");
		videos[i].appendChild(play);
		videos[i].onclick=function(){
			var iframe=document.createElement("iframe");
			var iframe_url="https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1";
			if(this.getAttribute("data-params"))iframe_url+='&'+this.getAttribute("data-params");
			iframe.setAttribute("src",iframe_url);
			iframe.setAttribute("frameborder",'0');
			iframe.style.width=this.style.width;
			iframe.style.height=this.style.height;
			this.parentNode.replaceChild(iframe,this);
		}
	}
});

Картинка: youtube-play-btn.zip
На основе: https://sitehere.ru/uskorit-zagruzku-stranic-sajta

Categories: CSS, Javascript Tags: ,
25 февраля 2022 Нет комментариев
hostnamectl set-hostname site.ru
yum update
yum install mc
mcedit ~/.bash_profile
	export EDITOR=mcedit
 
##apache
yum install httpd
systemctl start httpd.service
systemctl enable httpd.service
 
##mysql
yum install mariadb-server mariadb
systemctl start mariadb
mysql_secure_installation
systemctl enable mariadb.service
 
##php centos 8
yum install php php-cli php-fpm php-mysqlnd php-zip php-devel php-gd php-mbstring php-curl php-xml php-pear php-bcmath php-json
 
##php centos 7
#yum -y install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
yum -y install https://rpms.remirepo.net/enterprise/remi-release-7.rpm
#yum -y install yum-utils
yum-config-manager --enable remi-php74
yum update
yum install php php-cli php-fpm php-mysqlnd php-zip php-devel php-gd php-mcrypt php-mbstring php-curl php-xml php-pear php-bcmath php-json
 
##firewall
firewall-cmd --permanent --zone=public --add-service=http
firewall-cmd --permanent --zone=public --add-service=https
firewall-cmd --reload
 
##vhosts
mcedit /etc/httpd/conf.d/0default.conf
<VirtualHost *:80>
	ServerName site.local
	ServerAdmin webmaster@site.ru
	DocumentRoot /var/www/html
	ErrorLog /var/log/httpd/default_error.log
	CustomLog /var/log/httpd/default_access.log combined
</VirtualHost>
mkdir /var/www/site.ru
mcedit /etc/httpd/conf.d/site.ru.conf
<VirtualHost *:80>
	ServerName site.ru
	ServerAlias www.site.ru
	ServerAdmin webmaster@site.ru
	DocumentRoot /var/www/site.ru
	ErrorLog /var/log/httpd/site.ru_error.log
	CustomLog /var/log/httpd/site.ru_access.log combined
</VirtualHost>
 
##php.ini
mcedit /etc/php.ini
	short_open_tag = On
	upload_max_filesize = 2048M
	max_file_uploads = 1000
	post_max_size = 8192M
	max_execution_time = 14400
	max_input_time = 28800
	max_input_vars = 10000
	memory_limit = 4096M
 
##apache conf
mcedit /etc/httpd/conf/httpd.conf
	AllowOverride All
 
##restart apache
apachectl restart
 
##disable MySQL Strict Mode
mcedit /etc/my.cnf
	sql_mode=NO_ENGINE_SUBSTITUTION
service mariadb restart
 
##export db from old server
mysqldump -uDB_USER -p -h localhost DB_NAME > dump.sql
 
##import db
mysql -uDB_USER -p -h localhost DB_NAME < dump.sql
 
##files
chown -R apache:apache /var/www/site.ru/
find /var/www/site.ru/ -type d -exec chmod 775 {} \;
find /var/www/site.ru/ -type f -exec chmod 664 {} \;
 
##lets encrypt
#yum install epel-release
yum install snapd
systemctl enable --now snapd.socket
ln -s /var/lib/snapd/snap /snap
reboot
snap install core
snap refresh core
snap install --classic certbot
ln -s /snap/bin/certbot /usr/bin/certbot
yum install mod_ssl
apachectl restart
certbot --apache
 
##processlist
mysqladmin -uDB_USER -p -i 1 processlist
Categories: Linux Tags:
24 февраля 2022 Нет комментариев
dnf --disablerepo '*' --enablerepo=extras swap centos-linux-repos centos-stream-repos
dnf distro-sync
Categories: Linux Tags:
21 декабря 2021 Нет комментариев
function phone_format($phone){
	$d=preg_replace('~\D+~','',$phone);
	if(strlen($d)>=10){
		$d10=substr($d,-10,10);
		return '+7 ('.substr($d10,0,3).') '.substr($d10,3,3).'-'.substr($d10,6,2).'-'.substr($d10,8,2);
	}
	elseif(strlen($d)==7){
		return '+7 (812) '.substr($d,0,3).'-'.substr($d,3,2).'-'.substr($d,5,2);
	}
	else{
		return $phone;
	}
}
Categories: PHP Tags:
9 декабря 2021 Нет комментариев
$.fn.stickyfloat=function(options,lockBottom){
	var $obj=this;
	var parentPaddingTop=parseInt($obj.parent().css('padding-top'));
	var startOffset=$obj.parent().offset().top;
	var opts=$.extend({startOffset:startOffset,offsetY:parentPaddingTop,duration:200,lockBottom:true},options);
	$obj.css({position:'absolute'});
	if(opts.lockBottom){
		var bottomPos=$obj.parent().height()-$obj.height()+parentPaddingTop;
		if(bottomPos<0)
			bottomPos=0;
	}
	$(window).scroll(function(){
		$obj.stop();
		var pastStartOffset=$(document).scrollTop()>opts.startOffset;
		var objFartherThanTopPos=$obj.offset().top>startOffset;
		var objBiggerThanWindow=$obj.outerHeight()<$(window).height();
		if((pastStartOffset||objFartherThanTopPos)&&objBiggerThanWindow){
			var newpos=($(document).scrollTop()-startOffset+opts.offsetY);
			if(newpos>bottomPos)
				newpos=bottomPos;
			if($(document).scrollTop()<opts.startOffset)
				newpos=parentPaddingTop;
			$obj.animate({top:newpos},opts.duration);
		}
	});
};

Пример использования:

$(document).ready(function(){
	setTimeout(function(){
		$('#main .left').css('min-height',$('#main').height());
		$('#main .inner').stickyfloat({duration:500});
	},2000);
});
<div id="main">
	<div class="left">
		<div class="inner">content</div>
	</div>
	<div class="right"></div>
	<div class="clear"></div>
</div>
.left,.right{
	width:50%;
}
.left{
	position:relative;
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}

Источник: https://ruseller.com/lessons.php?id=999&rub=32

Categories: Javascript Tags:
9 декабря 2021 Нет комментариев
$.fn.setCursorPosition=function(pos){
	if($(this).get(0).setSelectionRange){
		$(this).get(0).setSelectionRange(pos,pos);
	}
	else if($(this).get(0).createTextRange){
		var range=$(this).get(0).createTextRange();
		range.collapse(true);
		range.moveEnd('character',pos);
		range.moveStart('character',pos);
		range.select();
	}
};
function set_mask_cursor(){
	$('input[name="phone"]').on('click',function(){
		$(this).setCursorPosition(4);
	});
	$('input[name="code"]').on('click',function(){
		$(this).setCursorPosition(0);
	});
}
$(document).ready(function(){
	$("input[name=phone]").mask("+7 (999) 999-99-99");
	$("input[name=code]").mask("9999");
	set_mask_cursor();
});
Categories: Javascript Tags:
24 ноября 2021 Нет комментариев

Убрать фон:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
	-webkit-box-shadow:0 0 0 30px #ffffff inset !important;
}

Изменить цвет текста:

input:-webkit-autofill{
	-webkit-text-fill-color:#c05857 !important;
}
Categories: CSS Tags: