I am trying to add class to element.
.html5-video-player {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}<a href="https://www.youtube.com/watch_popup?v=p-_qed5LTTg">test</a>I can't add CSS to element. I need to rotate in mobile devices. So I will later add bootstrap class @media (max-width: 767.98px) { to element after make it working.
Here is codepen.
I can't directly embed video in my website as I don't have space for that. I need it as link or link button. If watch_popup method don't work, I can also try bootstrap modal which has button, clicking on it will pop up embeded video. Rotating that to 90 degree to full screen also acceptable. Or any other javascript/jQuery method out there to make it happen? I need the rotation(Full screen) in mobile devices only.
I added the video content in <iframe>. Clicking <button> rotates <iframe> 90 degrees.
function rotate(){
document.getElementById("special-container").setAttribute("style", "display: inline !important");
document.getElementById("camera_view").setAttribute("style","transform: rotate(90deg)");
}a{
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="rotate()">Rotate</a>
<div id="special-container" class="embed-responsive embed-responsive-16by9" style="display: none;">
<iframe id="camera_view" class="embed-responsive-item container well well-small span6"
style="height: 720px; width: 1280px; background-color: #2e2e2e;"
src="https://www.youtube.com/watch_popup?v=p-_qed5LTTg">
</iframe>
</div>
</body>
</html>You forgot class="html5-video-player" in thé link 'a'