HTML5 видео с водяным знаком

HTML

Все что нам понадобиться - обернуть плеер:

<div class="video-wrapper">
	<video controls>
		<source src="http://images.all-free-download.com/footage_preview/mp4/piano_keys_300.mp4" type="video/mp4">
	</video>
</div>

и применить следующие стили:

CSS

.video-wrapper {
	width: 400px;
	position: relative;
}
.video-wrapper video {
	width: 100%; 
}
.video-wrapper:before {
	content: ' ';
	position: absolute;
	background: url('https://avatars0.githubusercontent.com/u/766193');
	background-size: cover;
	width: 50px;
	height: 50px;
	right: 20px;
	bottom: 20px;
	opacity: .7;
}

Результат

Теги: css, html5, сниппет

Редактировать