alexandrinos/Video_Tag.html

## responsive_video.css
/*1. FOR OBJECT,IFRAME,EMBED*/

/*in theory this can be used with images, too*/
.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ; change if other aspect ratio of video or use the javascript code responsive_video.js */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

/* all browsers will render iframe, canvas, embed,
and object tags as 300px x 150px if not otherwise declared.
Even if this isn't present in the UA stylesheet.*/
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*2.FOR VIDEO TAG*/
video {
	max-width: 100%;
	height: auto;
}

## responsive_video.html
<div class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    <embed width="800" height="450" src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" type="">
    <object width="800" height="400">
        <param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="450"></embed>
    </object>
</div>

<figure>
    <figcaption>Just a Video tag</figcaption>
    <video id="player1" width="700" height="auto" controls="control" preload="none">
        <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4">
        <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm">
        <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg">
    </video>
</figure>

## responsive_video.js
// this jQuery  can be added as alternative to the css code
// finds and write in attribute 'aspectRatio' and resize it
// when the window is resized

// Find all YouTube,Vimeo  videos


// if embed or object use => var $allVideos = $("object, embed"),
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

## Video_Tag.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Video Tag</title>
    <style>
        figure {
            text-align: center;
        }

        video {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <article>
        <!-- taken from: http://www.gutenberg.org/files/1661/1661-h/1661-h.htm#5 -->
        <h1>Adventure V. The Five Orange Pips</h1>
        <h2>From The Adventures of Sherlock Holmes</h2>


        <h3>By Sir Arthur Conan Doyle</h3>

        <figure>
            <figcaption>Just a Video tag</figcaption>
            <video id="player1" width="700" height="auto" controls="control" preload="none">
                <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4">
                <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm">
                <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg">
            </video>
        </figure>


        <p>When I glance over my notes and records of the Sherlock Holmes cases between the years ’82 and ’90, I am faced by so many which present strange and interesting features that it is no easy matter to know which to choose and which to leave. Some, however, have already gained publicity through the papers, and others have not offered a field for those peculiar qualities which my friend possessed in so high a degree, and which it is the object of these papers to illustrate. Some, too, have baffled his analytical skill, and would be, as narratives, beginnings without an ending, while others have been but partially cleared up, and have their explanations founded rather upon conjecture and surmise than on that absolute logical proof which was so dear to him. There is, however, one of these last which was so remarkable in its details and so startling in its results that I am tempted to give some account of it in spite of the fact that there are points in connection with it which never have been, and probably never will be, entirely cleared up.</p>


    </article>

</body>

</html>

## videotag_youtube.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Video Tag Youtube</title>
	</head>
	<body>

		<h1>A hack for displaying youtube videos on a video tag(not using iframe or embed)</h1>
		<video controls="true">
			<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
		</video>
	<video src="youtube.be/MLeIBFYY6UY" controls="true"></video>
	<script>

		videos = document.querySelectorAll("video");
	for (var i = 0, l = videos.length; i < l; i++) {
	var video = videos[i];
	var src = video.src || (function () {
	var sources = video.querySelectorAll("source");
	for (var j = 0, sl = sources.length; j < sl; j++) {
	var source = sources[j];
	var type = source.type;
	var isMp4 = type.indexOf("mp4") != -1;
	if (isMp4) return source.src;
	}
	return null;
	})();
	if (src) {
	var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
	if (isYoutube) {
	var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
	id = (id.length > 1) ? id.splice(1) : id;
	id = id.toString();
	var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
	video.src = mp4url + id;
	}
	}
	</script>
</body>
</html>
	/1. FOR OBJECT,IFRAME,EMBED/

	/in theory this can be used with images, too/
	.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ; change if other aspect ratio of video or use the javascript code responsive_video.js */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	}

	/* all browsers will render iframe, canvas, embed,
	and object tags as 300px x 150px if not otherwise declared.
	Even if this isn't present in the UA stylesheet.*/
	.video-container iframe,
	.video-container object,
	.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}



	/2.FOR VIDEO TAG/
	video {
	max-width: 100%;
	height: auto;
	}
	<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
	<embed width="800" height="450" src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" type="">
	<object width="800" height="400">
	<param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<embed src="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="450"></embed>
	</object>
	</div>

	<figure>
	<figcaption>Just a Video tag</figcaption>
	<video id="player1" width="700" height="auto" controls="control" preload="none">
	<source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4">
	<source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm">
	<source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg">
	</video>
	</figure>
	// this jQuery can be added as alternative to the css code
	// finds and write in attribute 'aspectRatio' and resize it
	// when the window is resized

	// Find all YouTube,Vimeo videos


	// if embed or object use => var $allVideos = $("object, embed"),
	var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),

	// The element that is fluid width
	$fluidEl = $("body");

	// Figure out and save aspect ratio for each video
	$allVideos.each(function() {

	$(this)
	.data('aspectRatio', this.height / this.width)

	// and remove the hard coded width/height
	.removeAttr('height')
	.removeAttr('width');

	});

	// When the window is resized
	$(window).resize(function() {

	var newWidth = $fluidEl.width();

	// Resize all videos according to their own aspect ratio
	$allVideos.each(function() {

	var $el = $(this);
	$el
	.width(newWidth)
	.height(newWidth * $el.data('aspectRatio'));

	});

	// Kick off one resize to fix all videos on page load
	}).resize();
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Video Tag</title>
	<style>
	figure {
	text-align: center;
	}

	video {
	max-width: 100%;
	height: auto;
	}
	</style>
	</head>

	<body>
	<article>
	<!-- taken from: http://www.gutenberg.org/files/1661/1661-h/1661-h.htm#5 -->
	<h1>Adventure V. The Five Orange Pips</h1>
	<h2>From The Adventures of Sherlock Holmes</h2>


	<h3>By Sir Arthur Conan Doyle</h3>

	<figure>
	<figcaption>Just a Video tag</figcaption>
	<video id="player1" width="700" height="auto" controls="control" preload="none">
	<source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4">
	<source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm">
	<source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg">
	</video>
	</figure>


	<p>When I glance over my notes and records of the Sherlock Holmes cases between the years ’82 and ’90, I am faced by so many which present strange and interesting features that it is no easy matter to know which to choose and which to leave. Some, however, have already gained publicity through the papers, and others have not offered a field for those peculiar qualities which my friend possessed in so high a degree, and which it is the object of these papers to illustrate. Some, too, have baffled his analytical skill, and would be, as narratives, beginnings without an ending, while others have been but partially cleared up, and have their explanations founded rather upon conjecture and surmise than on that absolute logical proof which was so dear to him. There is, however, one of these last which was so remarkable in its details and so startling in its results that I am tempted to give some account of it in spite of the fact that there are points in connection with it which never have been, and probably never will be, entirely cleared up.</p>


	</article>

	</body>

	</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Video Tag Youtube</title>
	</head>
	<body>

	<h1>A hack for displaying youtube videos on a video tag(not using iframe or embed)</h1>
	<video controls="true">
	<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
	</video>
	<video src="youtube.be/MLeIBFYY6UY" controls="true"></video>
	<script>

	videos = document.querySelectorAll("video");
	for (var i = 0, l = videos.length; i < l; i++) {
	var video = videos[i];
	var src = video.src \|\| (function () {
	var sources = video.querySelectorAll("source");
	for (var j = 0, sl = sources.length; j < sl; j++) {
	var source = sources[j];
	var type = source.type;
	var isMp4 = type.indexOf("mp4") != -1;
	if (isMp4) return source.src;
	}
	return null;
	})();
	if (src) {
	var isYoutube = src && src.match(/(?:youtu\|youtube)(?:\.com\|\.be)\/([\w\W]+)/i);
	if (isYoutube) {
	var id = isYoutube[1].match(/watch\?v=\|[\w\W]+/gi);
	id = (id.length > 1) ? id.splice(1) : id;
	id = id.toString();
	var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
	video.src = mp4url + id;
	}
	}
	</script>
	</body>
	</html>