Mixing
I've implemented a video tag inside of a modal. On click of it the video should play. But, in my case, the...
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm new to React and trying to create a video library. Everything is working fine but I'm not not able to render the video in a dynamic way. Even if what I have implemented is dynamic, but it's playing the same video.
server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.get('/latestVideos', (req, res) => {
res.send({
"videos": [
{
"thumbnail":"https://i.ytimg.com/vi/R-9i5NJsiL0/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "Lambhorghini",
"channelName":"Auto Car",
"views":"7 million views",
"lastUpdated":"3 weeks ago"
},
{
"thumbnail":"https://theawesomer.com/photos/2016/09/n6pdwdmjkze.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Porche",
"channelName":"LoudWire",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/bsSK1DccV_Y/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Havana",
"channelName":"Camila Cabello",
"views":"7 million views",
"lastUpdated":"6 weeks ago"
},
{
"thumbnail":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6njcfy1wTsPr8WAs5CubtCommlw2HAfYFIp1IY2yWRU2Oj1uM4A",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "See You Again",
"channelName":"Charlie Puth",
"views":"3 million views",
"lastUpdated":"1 week ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/Z0P9KW9B7nw/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Manali To Leh",
"channelName":"Mumbiker Nikhil",
"views":"5 million views",
"lastUpdated":"2 weeks ago"
},
{
"thumbnail":"https://mm.aiircdn.com/5/679578.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Don't Talk To Strangers",
"channelName":"Ronnie James Dio",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
}
]
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
latestVideos.js
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {latestVideos} from "../../actions";
class LatestVideos extends Component {
componentWillMount() {
this.props.getLatestVideos();
}
render() {
const {latestVideos} = this.props;
return (
<div className="container">
<h4 className="mt-3 mb-3"><i className="fas fa-play mr-2"></i>Latest Videos</h4>
<div className="row">
{latestVideos && latestVideos.map((data, i) => {
return (
<div key={i} className="col-sm-4">
<div className="card mb-3">
<img className="card-img-top" data-toggle="modal" data-target="#myModal" src={data.thumbnail}></img>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id="video"
poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
<div className="card-body">
<h5 className="card-title">{data.title}</h5>
<p className="card-text">{data.channelName}</p>
<p>{data.views} | {data.lastUpdated}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
latestVideos: state.videoBrowseList.latestVideos,
}
};
const mapActionsToProps = dispatch => {
return bindActionCreators({
getLatestVideos: latestVideos
}, dispatch);
};
export default connect(mapStateToProps, mapActionsToProps)(LatestVideos);
As you can from my code that is in server.js, everything is dynamic and in the frontend I have used map function. Everything is rendering, only the video, is playing the same video over and over again. Can someone please help me to troubleshoot this error
node.js reactjs express
edited Jan 3 at 8:28
marc_s
584k13011241271
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
add a comment |
0
I'm new to React and trying to create a video library. Everything is working fine but I'm not not able to render the video in a dynamic way. Even if what I have implemented is dynamic, but it's playing the same video.
server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.get('/latestVideos', (req, res) => {
res.send({
"videos": [
{
"thumbnail":"https://i.ytimg.com/vi/R-9i5NJsiL0/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "Lambhorghini",
"channelName":"Auto Car",
"views":"7 million views",
"lastUpdated":"3 weeks ago"
},
{
"thumbnail":"https://theawesomer.com/photos/2016/09/n6pdwdmjkze.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Porche",
"channelName":"LoudWire",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/bsSK1DccV_Y/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Havana",
"channelName":"Camila Cabello",
"views":"7 million views",
"lastUpdated":"6 weeks ago"
},
{
"thumbnail":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6njcfy1wTsPr8WAs5CubtCommlw2HAfYFIp1IY2yWRU2Oj1uM4A",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "See You Again",
"channelName":"Charlie Puth",
"views":"3 million views",
"lastUpdated":"1 week ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/Z0P9KW9B7nw/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Manali To Leh",
"channelName":"Mumbiker Nikhil",
"views":"5 million views",
"lastUpdated":"2 weeks ago"
},
{
"thumbnail":"https://mm.aiircdn.com/5/679578.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Don't Talk To Strangers",
"channelName":"Ronnie James Dio",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
}
]
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
latestVideos.js
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {latestVideos} from "../../actions";
class LatestVideos extends Component {
componentWillMount() {
this.props.getLatestVideos();
}
render() {
const {latestVideos} = this.props;
return (
<div className="container">
<h4 className="mt-3 mb-3"><i className="fas fa-play mr-2"></i>Latest Videos</h4>
<div className="row">
{latestVideos && latestVideos.map((data, i) => {
return (
<div key={i} className="col-sm-4">
<div className="card mb-3">
<img className="card-img-top" data-toggle="modal" data-target="#myModal" src={data.thumbnail}></img>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id="video"
poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
<div className="card-body">
<h5 className="card-title">{data.title}</h5>
<p className="card-text">{data.channelName}</p>
<p>{data.views} | {data.lastUpdated}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
latestVideos: state.videoBrowseList.latestVideos,
}
};
const mapActionsToProps = dispatch => {
return bindActionCreators({
getLatestVideos: latestVideos
}, dispatch);
};
export default connect(mapStateToProps, mapActionsToProps)(LatestVideos);
As you can from my code that is in server.js, everything is dynamic and in the frontend I have used map function. Everything is rendering, only the video, is playing the same video over and over again. Can someone please help me to troubleshoot this error
node.js reactjs express
edited Jan 3 at 8:28
marc_s
584k13011241271
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
add a comment |
0
0
0
I'm new to React and trying to create a video library. Everything is working fine but I'm not not able to render the video in a dynamic way. Even if what I have implemented is dynamic, but it's playing the same video.
server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.get('/latestVideos', (req, res) => {
res.send({
"videos": [
{
"thumbnail":"https://i.ytimg.com/vi/R-9i5NJsiL0/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "Lambhorghini",
"channelName":"Auto Car",
"views":"7 million views",
"lastUpdated":"3 weeks ago"
},
{
"thumbnail":"https://theawesomer.com/photos/2016/09/n6pdwdmjkze.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Porche",
"channelName":"LoudWire",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/bsSK1DccV_Y/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Havana",
"channelName":"Camila Cabello",
"views":"7 million views",
"lastUpdated":"6 weeks ago"
},
{
"thumbnail":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6njcfy1wTsPr8WAs5CubtCommlw2HAfYFIp1IY2yWRU2Oj1uM4A",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "See You Again",
"channelName":"Charlie Puth",
"views":"3 million views",
"lastUpdated":"1 week ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/Z0P9KW9B7nw/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Manali To Leh",
"channelName":"Mumbiker Nikhil",
"views":"5 million views",
"lastUpdated":"2 weeks ago"
},
{
"thumbnail":"https://mm.aiircdn.com/5/679578.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Don't Talk To Strangers",
"channelName":"Ronnie James Dio",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
}
]
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
latestVideos.js
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {latestVideos} from "../../actions";
class LatestVideos extends Component {
componentWillMount() {
this.props.getLatestVideos();
}
render() {
const {latestVideos} = this.props;
return (
<div className="container">
<h4 className="mt-3 mb-3"><i className="fas fa-play mr-2"></i>Latest Videos</h4>
<div className="row">
{latestVideos && latestVideos.map((data, i) => {
return (
<div key={i} className="col-sm-4">
<div className="card mb-3">
<img className="card-img-top" data-toggle="modal" data-target="#myModal" src={data.thumbnail}></img>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id="video"
poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
<div className="card-body">
<h5 className="card-title">{data.title}</h5>
<p className="card-text">{data.channelName}</p>
<p>{data.views} | {data.lastUpdated}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
latestVideos: state.videoBrowseList.latestVideos,
}
};
const mapActionsToProps = dispatch => {
return bindActionCreators({
getLatestVideos: latestVideos
}, dispatch);
};
export default connect(mapStateToProps, mapActionsToProps)(LatestVideos);
As you can from my code that is in server.js, everything is dynamic and in the frontend I have used map function. Everything is rendering, only the video, is playing the same video over and over again. Can someone please help me to troubleshoot this error
node.js reactjs express
edited Jan 3 at 8:28
marc_s
584k13011241271
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
I'm new to React and trying to create a video library. Everything is working fine but I'm not not able to render the video in a dynamic way. Even if what I have implemented is dynamic, but it's playing the same video.
server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.get('/latestVideos', (req, res) => {
res.send({
"videos": [
{
"thumbnail":"https://i.ytimg.com/vi/R-9i5NJsiL0/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "Lambhorghini",
"channelName":"Auto Car",
"views":"7 million views",
"lastUpdated":"3 weeks ago"
},
{
"thumbnail":"https://theawesomer.com/photos/2016/09/n6pdwdmjkze.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Porche",
"channelName":"LoudWire",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/bsSK1DccV_Y/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Havana",
"channelName":"Camila Cabello",
"views":"7 million views",
"lastUpdated":"6 weeks ago"
},
{
"thumbnail":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6njcfy1wTsPr8WAs5CubtCommlw2HAfYFIp1IY2yWRU2Oj1uM4A",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "See You Again",
"channelName":"Charlie Puth",
"views":"3 million views",
"lastUpdated":"1 week ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/Z0P9KW9B7nw/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Manali To Leh",
"channelName":"Mumbiker Nikhil",
"views":"5 million views",
"lastUpdated":"2 weeks ago"
},
{
"thumbnail":"https://mm.aiircdn.com/5/679578.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Don't Talk To Strangers",
"channelName":"Ronnie James Dio",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
}
]
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
latestVideos.js
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {latestVideos} from "../../actions";
class LatestVideos extends Component {
componentWillMount() {
this.props.getLatestVideos();
}
render() {
const {latestVideos} = this.props;
return (
<div className="container">
<h4 className="mt-3 mb-3"><i className="fas fa-play mr-2"></i>Latest Videos</h4>
<div className="row">
{latestVideos && latestVideos.map((data, i) => {
return (
<div key={i} className="col-sm-4">
<div className="card mb-3">
<img className="card-img-top" data-toggle="modal" data-target="#myModal" src={data.thumbnail}></img>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id="video"
poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
<div className="card-body">
<h5 className="card-title">{data.title}</h5>
<p className="card-text">{data.channelName}</p>
<p>{data.views} | {data.lastUpdated}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
latestVideos: state.videoBrowseList.latestVideos,
}
};
const mapActionsToProps = dispatch => {
return bindActionCreators({
getLatestVideos: latestVideos
}, dispatch);
};
export default connect(mapStateToProps, mapActionsToProps)(LatestVideos);
As you can from my code that is in server.js, everything is dynamic and in the frontend I have used map function. Everything is rendering, only the video, is playing the same video over and over again. Can someone please help me to troubleshoot this error
node.js reactjs express
node.js reactjs express
edited Jan 3 at 8:28
marc_s
584k13011241271
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
edited Jan 3 at 8:28
marc_s
584k13011241271
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
edited Jan 3 at 8:28
marc_s
584k13011241271
edited Jan 3 at 8:28
marc_s
584k13011241271
edited Jan 3 at 8:28
marc_s
584k13011241271
584k13011241271
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
asked Jan 3 at 8:26
Sajjad TabreezSajjad Tabreez
909
909
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
This is because your id myModal is same for all modal window, so only the first modal will be opened always, id should be unique.
Try the below code
<img className="card-img-top" data-toggle="modal" data-target={"#myModal" + i} src={data.thumbnail}></img>
<div className="modal fade" id={"myModal" + i}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id={"video" + i} poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018664%2five-implemented-a-video-tag-inside-of-a-modal-on-click-of-it-the-video-should%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
This is because your id myModal is same for all modal window, so only the first modal will be opened always, id should be unique.
Try the below code
<img className="card-img-top" data-toggle="modal" data-target={"#myModal" + i} src={data.thumbnail}></img>
<div className="modal fade" id={"myModal" + i}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id={"video" + i} poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
add a comment |
2
This is because your id myModal is same for all modal window, so only the first modal will be opened always, id should be unique.
Try the below code
<img className="card-img-top" data-toggle="modal" data-target={"#myModal" + i} src={data.thumbnail}></img>
<div className="modal fade" id={"myModal" + i}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id={"video" + i} poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
add a comment |
2
2
2
This is because your id myModal is same for all modal window, so only the first modal will be opened always, id should be unique.
Try the below code
<img className="card-img-top" data-toggle="modal" data-target={"#myModal" + i} src={data.thumbnail}></img>
<div className="modal fade" id={"myModal" + i}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id={"video" + i} poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
This is because your id myModal is same for all modal window, so only the first modal will be opened always, id should be unique.
Try the below code
<img className="card-img-top" data-toggle="modal" data-target={"#myModal" + i} src={data.thumbnail}></img>
<div className="modal fade" id={"myModal" + i}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id={"video" + i} poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
edited Jan 3 at 8:38
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
answered Jan 3 at 8:32
kiranvjkiranvj
13k23653
13k23653
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018664%2five-implemented-a-video-tag-inside-of-a-modal-on-click-of-it-the-video-should%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
