I'm trying to reproduce a youtube video in a local file.
My development is an application which build an slider and inside of some slides I set up a video from youtube or a local vídeo. When I set up a local video, there is no problem with it even I can reproduce the video without any problem.
But when I set up a video from youtube I've got this problem.
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html. See for more details.
If I upload my development to a server I've got the same error.
Here is my code ...
const list_elements = {
items: [
{
"tag" : "img",
"src" : "./images/image1.png",
"class" : "fit-size"
},
{
"tag" : "video",
"src" : "./videos/video1.mp4",
"class" : "fit-size"
},
{
"tag" : "text",
"src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image2.png",
"class" : "fit-size"
},
{
"tag" : "video",
"src" : "./videos/video2.mp4",
"class" : "fit-size"
},
{
"tag" : "text",
"src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
},
{
"tag" : "img",
"src" : "./images/image3.jpg",
"class" : "fit-size"
},
{
"tag" : "video",
"src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
"class" : "fit-size"
},
{
"tag" : "text",
"src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
},
{
"tag" : "img",
"src" : "./images/image4.jpeg",
"class" : "fit-size"
},
{
"tag" : "video",
"src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
"class" : "fit-size"
},
{
"tag" : "text",
"src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
},
{
"tag" : "img",
"src" : "./images/image5.png",
"class" : "fit-size"
},
{
"tag" : "video",
"src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
"class" : "fit-size"
},
{
"tag" : "text",
"src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image6.jpg",
"class" : "fit-size"
},
{
"tag" : "video",
"src" : "https://www.youtube.com/watch?v=G3Jghjh_SC4",
"class" : "fit-size"
},
{
"tag" : "text",
"src" : "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dignissim nunc, dapibus congue mi. Donec auctor eros orci, non semper lectus vulputate eget. Nunc at libero nisl. Ut id commodo quam.</p><p>Ut volutpat eros fringilla mi consequat, rutrum vehicula mi tristique. Aenean egestas mollis pretium.</p><p>Vestibulum et egestas libero. Integer sed quam quam. Cras cursus lorem id efficitur viverra. Mauris pretium nisl sed lectus fermentum pharetra.</p><p>Mauris massa velit, tincidunt nec justo eget, pellentesque hendrerit nisl. Integer nibh nisi, vehicula et aliquam vel, gravida eget sem. Nullam imperdiet dolor lorem, et commodo nisi interdum sed. Suspendisse gravida non velit sed sagittis.</p><p>In commodo massa sed lacus convallis, id placerat arcu blandit.</p>",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image7.png",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image8.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image9.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image10.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image11.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image12.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image13.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image14.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image15.jpg",
"class" : "fit-size"
},
{
"tag" : "img",
"src" : "./images/image16.jpeg",
"class" : "fit-size"
},
],
};
const SwipeDetector = (element) => {
let x_start = 0;
element.addEventListener("pointerdown", (e) => {
console.log(e);
x_start = e.x;
console.log("x inicio: " + e.x);
});
element.addEventListener("pointerup", (e) => {
let x_swipe = e.x - x_start;
console.log(e);
console.log("x_swipe: " + x_swipe);
if (x_swipe < -125) swipeToLeft();
if (x_swipe > 125) swipeToRight();
});
const swipeToLeft = () => {
console.log("Swipe to left!!!");
console.log("slide antes: " + slide);
moveToLeft();
};
const swipeToRight = () => {
console.log("Swipe to right!!!");
console.log("slide antes: " + slide);
moveToRight();
};
};
const leftDetector = (element) => {
element.addEventListener("click", (e) => {
moveToRight();
});
};
const rightDetector = (element) => {
element.addEventListener("click", (e) => {
moveToLeft();
});
};
/**
* Move the slider one slide to the left
*/
const moveToLeft = () => {
let slider = document.querySelector(".slider");
if (slide < list_elements.items.length - 1){
slide += 1;
slider.style.transition = "all 1s ease-in-out";
slider.style.marginLeft = -(slide * 100) + "%";
}
};
/**
* Move the slider to the right
*/
const moveToRight = () => {
let slider = document.querySelector(".slider");
if (slide > 0){
slide -= 1;
slider.style.transition = "all 1s ease-in-out";
slider.style.marginLeft = -(slide * 100) + "%";
}
};
/**
* Go to a determinated slide of the slider
*
* @param {*} slideToGo
*/
const goTo = (slideToGo) => {
console.log("slideToGo: " + slideToGo + " slide: " + slide);
let layerError = document.querySelector(".error");
let slider = document.querySelector(".slider");
layerError.innerHTML = "";
layerError.style.display = "none";
if ((slideToGo > 0) && (slideToGo <= list_elements.items.length)){
console.log("Vamos a ... " + (slideToGo - 1));
slider.style.transition = "all 0.5s ease-in-out";
slider.style.marginLeft = -((slideToGo - 1) * 100) + "%";
slide = parseInt(slideToGo - 1);
}else{
layerError.style.display = "block";
layerError.innerHTML = "Please, insert a number bewtween 1 and " + list_elements.items.length;
}
};
const createElementsOfSlider = (slider) => {
slider.style.width = list_elements.items.length*100 + "%";
console.log("Total elementos: " + list_elements.items.length);
for (let i = 0; i < list_elements.items.length; i++) {
let div = document.createElement("div");
div.id = "slide" + i;
div.className = "slider-content";
//div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
div.style.margin = 0;
div.style.padding = 0;
div.style.color = "#FFFFFF";
div.style.fontSize = 72 + "pt";
div.style.fontFamily = "Verdana";
div.style.fontWeight = "bold";
div.style.width = 100 + "%";
//div.innerHTML = (i < list_elements.items.length) ? list_elements.others[i] : i;
//Creating element inside div
if (list_elements.items[i].tag != "text"){
let element = document.createElement(list_elements.items[i].tag);
if (list_elements.items[i].tag === "video"){
let source = document.createElement("source");
element.style.width = 100 + "%";
element.style.height = 100 + "%";
element.controls = true;
source.src = list_elements.items[i].src;
source.type = "video/mp4";
element.appendChild(source);
}else{
element.src = list_elements.items[i].src;
element.className = list_elements.items[i].class;
}
div.appendChild(element);
}else{
div.innerHTML = list_elements.items[i].src;
}
slider.appendChild(div);
}
};body {
margin: auto;
text-align: center;
background-color: #F8A42B;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
text-align: justify;
font-size: 10pt;
color: #FFFFFF;
font-weight: normal;
}
/*****************************************************/
/******************** Container **********************/
/*****************************************************/
.container {
position: relative;
margin: auto;
border: 5px solid black;
height: 300px;
width: 50%;
max-width: 650px;
overflow: hidden;
}
/*****************************************************/
/***************** Slider Container ******************/
/*****************************************************/
.slider {
display: flex;
height: 100%;
background-color: #000000;
}
.fit-size {
max-width: 100%;
max-height: 100%;
font-size: 10pt;
text-align: justify;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
/*****************************************************/
/*********************** Selector ********************/
/*****************************************************/
.selector{
text-align: center;
margin: auto;
padding-top: 20pt;
padding-bottom: 20pt;
font-size: 12 pt;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
}
.error{
text-align: center;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
font-size: 12 pt;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: yellow;
color: red;
display: none;
}
/*****************************************************/
/****************** Buttons navigation ***************/
/*****************************************************/
.slider-button{
position: absolute;
width: 38px;
height: 38px;
background-color: #FFF;
opacity: 0.25;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-weight: bold;
font-family: monospace;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.slider-button:hover{
opacity: 1;
}
#l-button{
left: 10px;
}
#r-button{
right: 10px;
}<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="./css/styles.css">
<script type="text/javascript" src = "./js/functions.js"></script>
<meta charset="UTF-8">
</header>
<body>
<div>
<h1>Slider Scandiweb</h1>
<!-- <div class = "container">
<div class = "slider-container"></div>
<div class = "window-container">
<div class = "left"></div>
<div id="window">
<div id = "l-icon"><br /><br /><br /><p><<</p></div>
<div id = "r-icon"><br /><br /><br /><p>>></p></div>
</div>
<div class = "right"></div>
</div>
</div> -->
<div class = "container">
<div class = "slider">
</div>
<div class = "slider-button" id = "l-button"><</div>
<div class = "slider-button" id = "r-button">></div>
</div>
<div class = "error"></div>
<div class = "selector">
Go to slide <input id = "selector" type = "text" value = "" placeholder = "Press enter to go ... " onChange = "goTo(this.value)" /> of 50 <button>Go To</button>
</div>
</div>
</body>
<script type="text/javascript">
var slide = 0;
let slider = document.querySelector(".slider");
//var elements = list_elements.total_elements;
//Creation elements
createElementsOfSlider(slider);
SwipeDetector(slider);
leftDetector(document.querySelector("#l-button"));
rightDetector(document.querySelector("#r-button"));
</script>
</html>What am I doing wrong? How can I reproduce videos from youtube or any other external source without any problem?
When you say you are assigning a video/mp4 type URL to the src of a <video> then the URL you provide has to point to an mp4 video.
You are pointing at HTML documents. The video element doesn't support HTML document as the source (because HTML documents are not videos).