实用代码

1、改变浏览器标签标题。

有不少朋友问为什么切换到其它网站后我博客的网站标题会变成“草榴社區主論壇 - t66y.com”这个知名网站,实际上都是装X惹的祸:把以下代码加入JS。来源:评论一楼,进阶:js改变浏览器标签标题

//改变浏览器标签标题
var changeTitle = {
	originTitle: document.title,
	change: function() {
		document.title = "在这里自定义浏览器标签标题";
	},
	reset: function() {
		document.title = changeTitle.originTitle;
	}
};
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        changeTitle.change();
    } else {
        changeTitle.reset();
    }
});

2、插入自适应视频播放器。

插入自适应媒体已经是刚需了,之前也介绍过一种姿势,貌似这个更简单一些。当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的,而且你在用手机浏览的时候视频播放器还变形了,以下代码自动让播放器按16:9的比例显示并自适应各个设备。另外:还可以插入腾讯自适应视频

CSS代码:

.media-wrap {
 position: relative;
//为max-width!important
 max-width: 100% !important;
 height: 0;
 padding-bottom: 45%;
//加margin-bottom
 margin-bottom:20px;
}
//@media
@media (max-width:736px){
 .media-wrap {
 padding-bottom: 56.25%;
 }
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
 position: absolute;
 top: 0;
 left: 0;
//为max-width!important
 max-width: 100% !important;
 height: 100% !important;
}

HTML代码:

<div class="media-wrap">
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe>
</div>

embed代码在苹果iOS上无法正常显示,只能采用iframe。之前的CSS代码,在电脑上就被直接拉伸为100%了;另外如果两段video代码连续放置,会首尾连接在一起。解决方案是更改width为max-width,以及增加margin-bottom。

感谢竹炉山房:http://talk.synyan.net/15092.html



文章ID:1098 。转载请注明:http://www.ithmz.com » 实用代码

本人五毒俱全且有严重暴力倾向,现实生活中建议远离,否则后果自负。

《实用代码》上有 15 条评论

  1. avatar

    那个#号加在代码哪里?

  2. avatar

    貌似加上了fatesinger的楼层css代码 :lol:

  3. avatar

    代码有更改空间,见:http://talk.synyan.net/15092.html

  4. Pingback: 自适应视频播放器CSS代码 – 竹炉山房

  5. avatar

    自适应媒体播放器解救众生啊。1024个赞。

  6. avatar

    确实啊切换到别的网页就变了草榴了,效果杠杠的!!

  7. avatar

    1024,单独回复1024居然回复不了TuT

世界有你更精彩!

与 从良未遂 联络感情